@khipu/design-system 0.2.0-alpha.83 → 0.2.0-alpha.84

package/dist/beercss/khipu-beercss.css

@@ -11,7 +11,7 @@
  *
  * AUTO-GENERATED FILE - DO NOT EDIT MANUALLY
  * Source: design-system/src/tokens/tokens.json
- * Generated: 2026-07-01T02:24:50.156Z
+ * Generated: 2026-07-01T17:49:00.275Z
  *
  * To regenerate:
  *   cd design-system && npm run tokens:generate
@@ -5508,6 +5508,125 @@ dialog#surveyModal button.circle {
     box-shadow: 0 -4px 16px rgba(16,24,40,.08);
 }
 
+/* ========================================
+   08b - FAB (.kds-fab)
+   Circular, icon-only floating action button with an animated hide state.
+   Presentational: drive `.kds-fab--hidden` from useHideOnScroll for scroll-away.
+   ======================================== */
+
+.kds-fab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--kds-spacing-5);
+    height: var(--kds-spacing-5);
+    padding: 0;
+    border: none;
+    border-radius: var(--kds-radius-full);
+    background: var(--kds-color-background-paper);
+    color: var(--kds-color-text-primary);
+    box-shadow: var(--kds-shadow-elevated);
+    cursor: pointer;
+    z-index: 100;
+    /* Neutralize native button rendering so the pressed state doesn't flash a square. */
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity var(--kds-transition-short) ease, transform var(--kds-transition-short) ease,
+                background-color var(--kds-transition-shorter) ease;
+}
+
+/* Keep the circle in EVERY interaction state. Uses `button.kds-fab` (element + class) to
+   out-specify BeerCSS's base `button`/`button:active` rules — same trick as `.kds-btn`. */
+button.kds-fab,
+button.kds-fab:hover,
+button.kds-fab:active,
+button.kds-fab:focus,
+button.kds-fab:focus-visible {
+    border-radius: var(--kds-radius-full);
+    background: var(--kds-color-background-paper);
+}
+
+button.kds-fab:hover:not(:disabled) {
+    background: var(--kds-color-background-muted);
+}
+
+/* Subtle press feedback that preserves the round shape. */
+button.kds-fab:active:not(:disabled) {
+    transform: translateY(var(--kds-spacing-0-25));
+}
+
+button.kds-fab:focus-visible {
+    outline: var(--kds-spacing-0-25) solid var(--kds-color-primary-main);
+    outline-offset: var(--kds-spacing-0-25);
+}
+
+.kds-fab > i.material-symbols-outlined {
+    font-size: var(--kds-spacing-button-icon-size);
+    line-height: 1;
+}
+
+/* Pinned corners — fixed to the viewport (stays visible on scroll-up, iframe-friendly).
+   Horizontally the top-right FAB hugs the right edge of the centered content column set via
+   `--kds-fab-column-width` (default 100% → viewport edge). The consumer sets that var to its
+   widget width so on desktop the FAB overlaps the header's top-right corner instead of drifting
+   to the far viewport edge. `max(...)` keeps at least a token inset on narrow (mobile) viewports. */
+.kds-fab--top-right,
+.kds-fab--top-left,
+.kds-fab--bottom-right,
+.kds-fab--bottom-left {
+    position: fixed;
+}
+
+.kds-fab--top-right {
+    top: var(--kds-spacing-2);
+    right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--top-left {
+    top: var(--kds-spacing-2);
+    left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--bottom-right {
+    bottom: var(--kds-spacing-2);
+    right: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+.kds-fab--bottom-left {
+    bottom: var(--kds-spacing-2);
+    left: max(var(--kds-spacing-2), calc((100% - var(--kds-fab-column-width, 100%)) / 2 + var(--kds-spacing-2)));
+}
+
+/* Desktop: nudge the top-right FAB up so it sits partially over the header's top edge. */
+@media (min-width: 768px) {
+    .kds-fab--top-right {
+        top: var(--kds-spacing-1);
+    }
+}
+
+/* Hidden (scroll-away) state — fade + slide toward the nearest edge */
+.kds-fab--hidden {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--kds-spacing-1))) scale(0.9);
+    pointer-events: none;
+}
+
+.kds-fab--bottom-right.kds-fab--hidden,
+.kds-fab--bottom-left.kds-fab--hidden {
+    transform: translateY(var(--kds-spacing-1)) scale(0.9);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .kds-fab {
+        transition: opacity var(--kds-transition-short) ease;
+    }
+
+    .kds-fab--hidden {
+        transform: none;
+    }
+}
+
 /* ========================================
    09 - SUCCESS MARK (.kds-success-mark)
    Large success icon for completion screens

package/dist/beercss/khipu-beercss.js

@@ -892,6 +892,7 @@ const ui = _context.ui;
         initCountdown();
         initSegmentedTabs();
         initStickyInvoice();
+        initHideOnScroll();
         initBankModal();
 
         console.log('Material Design initialization complete!');
@@ -1429,6 +1430,67 @@ const ui = _context.ui;
         onScroll();
     }
 
+    /**
+     * Initialize hide-on-scroll for floating elements (vanilla equivalent of the React
+     * `useHideOnScroll` hook). Any element with `[data-hide-on-scroll]` gets its hide class
+     * (default `kds-fab--hidden`, override with `data-hide-class`) toggled: hidden when
+     * scrolling down past the threshold, shown when scrolling up, always shown within
+     * `data-hide-top-offset` px of the top. Tune with `data-hide-threshold` (default 8).
+     *
+     * Works standalone (`window.scrollY`) and embedded in an iframe, where the parent posts
+     * `postMessage({ type: 'VIEWPORT_OFFSET', offsetTop })`.
+     * @param {Element} root - Root element to scope the query (default: document)
+     */
+    function initHideOnScroll(root) {
+        root = root || document;
+        var els = root.querySelectorAll('[data-hide-on-scroll]');
+        if (!els.length) return;
+
+        var viewportOffset = 0;
+        var ticking = false;
+        var lastYs = new Map();
+
+        function currentY() {
+            return Math.max(window.scrollY || window.pageYOffset || 0, viewportOffset);
+        }
+
+        function apply() {
+            ticking = false;
+            var y = currentY();
+            els.forEach(function(el) {
+                var threshold = parseInt(el.getAttribute('data-hide-threshold'), 10) || 8;
+                var topOffset = parseInt(el.getAttribute('data-hide-top-offset'), 10) || 0;
+                var hideClass = el.getAttribute('data-hide-class') || 'kds-fab--hidden';
+                var lastY = lastYs.has(el) ? lastYs.get(el) : y;
+                if (y <= topOffset) {
+                    el.classList.remove(hideClass);
+                    lastYs.set(el, y);
+                    return;
+                }
+                var delta = y - lastY;
+                if (Math.abs(delta) < threshold) return;
+                el.classList.toggle(hideClass, delta > 0);
+                lastYs.set(el, y);
+            });
+        }
+
+        function onScroll() {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(apply);
+        }
+
+        window.addEventListener('scroll', onScroll, { passive: true });
+        window.addEventListener('resize', onScroll);
+        window.addEventListener('message', function(event) {
+            if (event.data && event.data.type === 'VIEWPORT_OFFSET') {
+                viewportOffset = Math.max(0, event.data.offsetTop || 0);
+                onScroll();
+            }
+        });
+        apply();
+    }
+
     /**
      * Initialize copyable table rows
      * Delegated click on .kds-copyable-table-row[data-copy] copies value and shows feedback
@@ -1599,6 +1661,7 @@ const ui = _context.ui;
     window.Khipu.initInfoTip = initInfoTip;
     window.Khipu.initBankModal = initBankModal;
     window.Khipu.initStickyInvoice = initStickyInvoice;
+    window.Khipu.initHideOnScroll = initHideOnScroll;
 
     // Also export showSnackbar to global scope for backward compatibility
     window.showSnackbar = showSnackbar;