@cahyo-dimas/freeday 1.15.0 → 1.17.0

package/dist/freeday.js

@@ -2340,7 +2340,11 @@
       setHighlight(-1);
       if (openClose === close) openClose = null;
     }
-    function choose(opt) {
+    // Mark an option selected + reflect it in the button. `silent` skips the change
+    // event, close, and focus — used by the programmatic setValue() below so a host
+    // (e.g. a Blazor/framework wrapper) can push a value in without echoing an event
+    // back to itself or stealing focus. User-driven picks go through choose() (loud).
+    function select(opt, silent) {
       options.forEach(function (other) {
         var on = other === opt;
         other.setAttribute('aria-selected', on ? 'true' : 'false');
@@ -2350,12 +2354,24 @@
       root.setAttribute('data-value', opt.getAttribute('data-value') || '');
       valueEl.textContent = optionLabel(opt);
       valueEl.classList.remove('fdy-combo__value--placeholder');
-      root.dispatchEvent(new CustomEvent('fdy-change', {
-        bubbles: true,
-        detail: { value: opt.getAttribute('data-value') }
-      }));
-      close();
-      button.focus();
+      if (!silent) {
+        root.dispatchEvent(new CustomEvent('fdy-change', {
+          bubbles: true,
+          detail: { value: opt.getAttribute('data-value') }
+        }));
+        close();
+        button.focus();
+      }
+    }
+    function choose(opt) { select(opt, false); }
+    // Programmatic set (no event, no focus change). No-op if no option matches.
+    function setValue(value) {
+      for (var i = 0; i < options.length; i++) {
+        if ((options[i].getAttribute('data-value') || '') === String(value)) {
+          select(options[i], true);
+          return;
+        }
+      }
     }
 
     button.addEventListener('click', function () {
@@ -2416,6 +2432,9 @@
     root.addEventListener('focusout', function (e) {
       if (!root.contains(e.relatedTarget)) close();
     });
+
+    // Per-instance API for programmatic control (host wrappers / two-way binding).
+    root._fdyCombo = { setValue: setValue };
   }
 
   function initAll(context) {
@@ -2439,7 +2458,12 @@
     initAll();
   }
 
-  window.FreedayCombo = { init: initCombo, initAll: initAll };
+  // Programmatic set on an already-initialised combo root (no fdy-change dispatched).
+  function setValue(root, value) {
+    if (root && root._fdyCombo) root._fdyCombo.setValue(value);
+  }
+
+  window.FreedayCombo = { init: initCombo, initAll: initAll, setValue: setValue };
 })();
 
 /* Freeday — slider value binding (optional, zero-dependency).
@@ -3295,16 +3319,26 @@
 })();
 
 /* Freeday — toast API (optional, zero-dependency).
- * Freeday.toast({ variant, title, message, timeout }) shows a transient
+ * Freeday.toast({ variant, title, message, timeout, key }) shows a transient
  * notification in a live region (created on first use). Returns the element.
  *   variant: 'success' | 'warning' | 'danger' | 'info' (default: neutral)
  *   timeout: ms before auto-dismiss (default 4000; 0 = sticky)
+ *   key:     optional stable id — a new toast with the same key REPLACES the
+ *            existing one in place instead of stacking a duplicate (e.g. a burst
+ *            of identical failures shows one toast, refreshed).
+ * Freeday.dismiss(nodeOrKey) closes a toast early (pass the returned element or its key).
  * Danger toasts use role="alert"; others role="status".
  */
 (function () {
   'use strict';
 
   var region = null;
+  var keyed = {}; // key -> current node, for replace-in-place + dismiss-by-key
+
+  function forget(node) {
+    var k = node && node._fdyKey;
+    if (k != null && keyed[k] === node) delete keyed[k];
+  }
 
   function ensureRegion() {
     if (region && document.body.contains(region)) return region;
@@ -3320,7 +3354,9 @@
   }
 
   function dismiss(toast) {
+    if (typeof toast === 'string') toast = keyed[toast]; // dismiss by key
     if (!toast || toast.dataset.leaving === '1') return;
+    forget(toast);
     toast.dataset.leaving = '1';
     toast.classList.add('is-leaving');
     var remove = function () { if (toast.parentNode) toast.parentNode.removeChild(toast); };
@@ -3360,6 +3396,14 @@
     node.appendChild(accent);
     node.appendChild(body);
     node.appendChild(close);
+
+    // Replace-in-place: a same-key toast removes the previous one so bursts don't stack.
+    if (opts.key != null) {
+      var prev = keyed[opts.key];
+      if (prev && prev.parentNode) prev.parentNode.removeChild(prev);
+      node._fdyKey = opts.key;
+      keyed[opts.key] = node;
+    }
     region.appendChild(node);
 
     var timeout = opts.timeout == null ? 4000 : opts.timeout;
@@ -3377,6 +3421,7 @@
 
   window.Freeday = window.Freeday || {};
   window.Freeday.toast = toast;
+  window.Freeday.dismiss = dismiss; // dismiss(nodeOrKey)
 })();
 
 /* Freeday — tree checkbox cascade (optional, zero-dependency).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/base.css

@@ -15,6 +15,11 @@ 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; }
 .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
+ * framework with its preflight OFF (the recommended pairing), a semantic <ul>/<ol> keeps native
+ * bullets + a 40px indent; add this class (or a Freeday list component) to normalise it. */
+.fdy-list-reset { list-style: none; margin: 0; padding: 0; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
 }

package/src/components/avatar.css

@@ -6,3 +6,16 @@
 .fdy-avatar-group{display:inline-flex;}
 .fdy-avatar-group .fdy-avatar{border:2px solid var(--color-surface);margin-left:calc(var(--space-2)*-1);}
 .fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}
+/* Decorative identity tones — a soft tint of a categorical chart colour with a theme-aware,
+ * text-leaning foreground so initials keep WCAG AA (verified >=4.5:1 in light & dark by
+ * test/contrast.test.mjs). Use to disambiguate same-initial avatars (e.g. many "PT …" names):
+ * hash a stable 1..8 index off the FULL name in your app, then apply .fdy-avatar--tone-<n>. */
+.fdy-avatar--tone-1,.fdy-avatar--tone-2,.fdy-avatar--tone-3,.fdy-avatar--tone-4,.fdy-avatar--tone-5,.fdy-avatar--tone-6,.fdy-avatar--tone-7,.fdy-avatar--tone-8{background:color-mix(in srgb,var(--_fdy-avatar-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-avatar-tone) 50%,var(--color-text));}
+.fdy-avatar--tone-1{--_fdy-avatar-tone:var(--chart-1);}
+.fdy-avatar--tone-2{--_fdy-avatar-tone:var(--chart-2);}
+.fdy-avatar--tone-3{--_fdy-avatar-tone:var(--chart-3);}
+.fdy-avatar--tone-4{--_fdy-avatar-tone:var(--chart-4);}
+.fdy-avatar--tone-5{--_fdy-avatar-tone:var(--chart-5);}
+.fdy-avatar--tone-6{--_fdy-avatar-tone:var(--chart-6);}
+.fdy-avatar--tone-7{--_fdy-avatar-tone:var(--chart-7);}
+.fdy-avatar--tone-8{--_fdy-avatar-tone:var(--chart-8);}

package/src/components/card.css

@@ -3,6 +3,10 @@
 .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);}
+/* When the whole card IS the control — a real <button> so the row is keyboard-reachable and
+ * 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;}
 .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/skeleton.css

@@ -3,5 +3,10 @@
 .fdy-skeleton--text{height:.8rem;margin:.3rem 0;}
 .fdy-skeleton--title{height:1.2rem;width:40%;}
 .fdy-skeleton--circle{border-radius:var(--radius-full);}
+/* Size-matched to .fdy-avatar (2.5rem) and its --sm/--lg, so a skeleton reserves the exact avatar
+ * box and data landing causes no layout shift (a plain --circle has no dimensions of its own). */
+.fdy-skeleton--avatar{width:2.5rem;height:2.5rem;border-radius:var(--radius-full);}
+.fdy-skeleton--avatar-sm{width:2rem;height:2rem;border-radius:var(--radius-full);}
+.fdy-skeleton--avatar-lg{width:3.5rem;height:3.5rem;border-radius:var(--radius-full);}
 @keyframes fdy-skeleton{to{background-position:-200% 0;}}
 @media (prefers-reduced-motion:reduce){.fdy-skeleton{animation:none;}}

package/src/freeday-select.js

@@ -91,7 +91,11 @@
       setHighlight(-1);
       if (openClose === close) openClose = null;
     }
-    function choose(opt) {
+    // Mark an option selected + reflect it in the button. `silent` skips the change
+    // event, close, and focus — used by the programmatic setValue() below so a host
+    // (e.g. a Blazor/framework wrapper) can push a value in without echoing an event
+    // back to itself or stealing focus. User-driven picks go through choose() (loud).
+    function select(opt, silent) {
       options.forEach(function (other) {
         var on = other === opt;
         other.setAttribute('aria-selected', on ? 'true' : 'false');
@@ -101,12 +105,24 @@
       root.setAttribute('data-value', opt.getAttribute('data-value') || '');
       valueEl.textContent = optionLabel(opt);
       valueEl.classList.remove('fdy-combo__value--placeholder');
-      root.dispatchEvent(new CustomEvent('fdy-change', {
-        bubbles: true,
-        detail: { value: opt.getAttribute('data-value') }
-      }));
-      close();
-      button.focus();
+      if (!silent) {
+        root.dispatchEvent(new CustomEvent('fdy-change', {
+          bubbles: true,
+          detail: { value: opt.getAttribute('data-value') }
+        }));
+        close();
+        button.focus();
+      }
+    }
+    function choose(opt) { select(opt, false); }
+    // Programmatic set (no event, no focus change). No-op if no option matches.
+    function setValue(value) {
+      for (var i = 0; i < options.length; i++) {
+        if ((options[i].getAttribute('data-value') || '') === String(value)) {
+          select(options[i], true);
+          return;
+        }
+      }
     }
 
     button.addEventListener('click', function () {
@@ -167,6 +183,9 @@
     root.addEventListener('focusout', function (e) {
       if (!root.contains(e.relatedTarget)) close();
     });
+
+    // Per-instance API for programmatic control (host wrappers / two-way binding).
+    root._fdyCombo = { setValue: setValue };
   }
 
   function initAll(context) {
@@ -190,5 +209,10 @@
     initAll();
   }
 
-  window.FreedayCombo = { init: initCombo, initAll: initAll };
+  // Programmatic set on an already-initialised combo root (no fdy-change dispatched).
+  function setValue(root, value) {
+    if (root && root._fdyCombo) root._fdyCombo.setValue(value);
+  }
+
+  window.FreedayCombo = { init: initCombo, initAll: initAll, setValue: setValue };
 })();

package/src/freeday-toast.js

@@ -1,14 +1,24 @@
 /* Freeday — toast API (optional, zero-dependency).
- * Freeday.toast({ variant, title, message, timeout }) shows a transient
+ * Freeday.toast({ variant, title, message, timeout, key }) shows a transient
  * notification in a live region (created on first use). Returns the element.
  *   variant: 'success' | 'warning' | 'danger' | 'info' (default: neutral)
  *   timeout: ms before auto-dismiss (default 4000; 0 = sticky)
+ *   key:     optional stable id — a new toast with the same key REPLACES the
+ *            existing one in place instead of stacking a duplicate (e.g. a burst
+ *            of identical failures shows one toast, refreshed).
+ * Freeday.dismiss(nodeOrKey) closes a toast early (pass the returned element or its key).
  * Danger toasts use role="alert"; others role="status".
  */
 (function () {
   'use strict';
 
   var region = null;
+  var keyed = {}; // key -> current node, for replace-in-place + dismiss-by-key
+
+  function forget(node) {
+    var k = node && node._fdyKey;
+    if (k != null && keyed[k] === node) delete keyed[k];
+  }
 
   function ensureRegion() {
     if (region && document.body.contains(region)) return region;
@@ -24,7 +34,9 @@
   }
 
   function dismiss(toast) {
+    if (typeof toast === 'string') toast = keyed[toast]; // dismiss by key
     if (!toast || toast.dataset.leaving === '1') return;
+    forget(toast);
     toast.dataset.leaving = '1';
     toast.classList.add('is-leaving');
     var remove = function () { if (toast.parentNode) toast.parentNode.removeChild(toast); };
@@ -64,6 +76,14 @@
     node.appendChild(accent);
     node.appendChild(body);
     node.appendChild(close);
+
+    // Replace-in-place: a same-key toast removes the previous one so bursts don't stack.
+    if (opts.key != null) {
+      var prev = keyed[opts.key];
+      if (prev && prev.parentNode) prev.parentNode.removeChild(prev);
+      node._fdyKey = opts.key;
+      keyed[opts.key] = node;
+    }
     region.appendChild(node);
 
     var timeout = opts.timeout == null ? 4000 : opts.timeout;
@@ -81,4 +101,5 @@
 
   window.Freeday = window.Freeday || {};
   window.Freeday.toast = toast;
+  window.Freeday.dismiss = dismiss; // dismiss(nodeOrKey)
 })();