Trigger

Declarative click-action triggers. Add data-wf-trigger to any clickable element to wire up common page behaviors without writing JavaScript. Thirteen actions are built in: show , hide , toggle , scroll-to , scroll-top , toggle-password , generate-password , copy , toggle-theme , set-localstorage , set-cookie , load-more , and multi-element . Show/hide actions preserve the element’s original CSS display value (flex, grid, inline-flex…) so toggling never clobbers it with display:block .

Show / Hide / Toggle

Point data-wf-target at a CSS selector to show, hide, or toggle the visibility of any element. Use data-wf-hide-self to hide the trigger after it fires, and data-wf-show-self to reveal a partner element — useful for paired open/close buttons. Add data-wf-animation-in or data-wf-animation-out with any wf-ani-* class to animate the transition.

<button data-wf-trigger="toggle"
        data-wf-target="#panel"
        data-wf-animation-in="wf-ani-fade-in">Toggle</button>

<div id="panel">Content</div>

<!-- Open button hides itself and shows the close button -->
<button id="open-btn"
        data-wf-trigger="show"
        data-wf-target="#panel"
        data-wf-hide-self
        data-wf-show-self="#close-btn"
        data-wf-animation-in="wf-ani-fade-in">Open</button>

<!-- Close button hides itself and shows the open button -->
<button id="close-btn"
        data-wf-trigger="hide"
        data-wf-target="#panel"
        data-wf-hide-self
        data-wf-show-self="#open-btn"
        class="wf-hidden">Close</button>

<div id="panel">Content</div>

Scroll To & Top

scroll-to smoothly scrolls to any element on the page. Use data-wf-offset to subtract the height of a sticky header so the target is not obscured. Set data-wf-behavior="auto" for instant (no animation) scrolling. The component automatically detects whether to scroll window or a scrollable ancestor container. scroll-top requires no target and scrolls back to the very top.

<!-- Scroll to a section, offset by 72 px (e.g. sticky navbar height) -->
<button data-wf-trigger="scroll-to"
        data-wf-target="#intro"
        data-wf-offset="72">Jump to Intro</button>

<!-- Instant scroll (no animation) -->
<button data-wf-trigger="scroll-to"
        data-wf-target="#section"
        data-wf-behavior="auto">Go to section</button>

<!-- Back to top -->
<button data-wf-trigger="scroll-top">↑ Back to top</button>

Password Toggle

Add data-wf-trigger="toggle-password" to a button inside a wf-input-group . Point data-wf-target at the password input. The component swaps the input type between password and text , toggles the button icon between icon view and icon view slash , updates aria-pressed , and updates any [data-wf-toggle-text] label span.

<label class="wf-label" for="pwd">Password</label>
<div class="wf-input-group">
  <input type="password" id="pwd" class="wf-input" autocomplete="current-password">
  <button class="wf-btn wf-btn-outline" type="button"
          data-wf-trigger="toggle-password"
          data-wf-target="#pwd"
          aria-label="Show password">
    <i class="icon eye" aria-hidden="true"></i>
  </button>
</div>

Generate Password

Add data-wf-trigger="generate-password" to a button and point data-wf-target at a password <input> . On click the component fills the input with a cryptographically secure random password (via crypto.getRandomValues() ), dispatches input and change events so reactive form libraries stay in sync, and emits wf:generate-password . Password length defaults to 16 and all character sets (uppercase, lowercase, numbers) are on by default. Symbols are opt-in via data-wf-password-symbols . At least one character from every enabled set is always guaranteed before the rest is filled, and the result is Fisher–Yates shuffled to remove positional bias.

<!-- Input paired with a toggle-password and a generate button -->
<div class="wf-input-group">
  <input type="password" id="new-pwd" class="wf-input" autocomplete="new-password">
  <button type="button"
          data-wf-trigger="toggle-password"
          data-wf-target="#new-pwd"
          aria-label="Show password">
    <i class="icon view" aria-hidden="true"></i>
  </button>
</div>

<!-- Default: 16 chars, upper + lower + numbers, no symbols -->
<button type="button"
        data-wf-trigger="generate-password"
        data-wf-target="#new-pwd">Generate</button>

<!-- 24 chars with symbols -->
<button type="button"
        data-wf-trigger="generate-password"
        data-wf-target="#new-pwd"
        data-wf-password-length="24"
        data-wf-password-symbols="true"
        data-wf-password-symbol-set="!@#$%^&*()">Generate strong</button>

<!-- Numbers only (e.g. a PIN) -->
<button type="button"
        data-wf-trigger="generate-password"
        data-wf-target="#pin-input"
        data-wf-password-length="6"
        data-wf-password-upper="false"
        data-wf-password-lower="false">Generate PIN</button>

Copy to Clipboard

Add data-wf-trigger="copy" to a button and point data-wf-target at any input, textarea, or element. On click the component copies the element’s value (inputs and textareas) or textContent (any other element) to the clipboard using the native navigator.clipboard API. After a successful copy the trigger receives the class is-copied for data-wf-copy-success-duration milliseconds (default 2 000) — use it to swap icons or show a “Copied!” label via CSS. Requires HTTPS or localhost.

<!-- Copy from a readonly input (e.g. API key) -->
<div class="wf-input-wrap wf-has-action">
  <input type="text" id="api-key" class="wf-input" value="sk-abc123" readonly>
  <button type="button"
          class="wf-btn wf-btn-outline"
          data-wf-trigger="copy"
          data-wf-target="#api-key"
          aria-label="Copy to clipboard">
    <i class="icon copy" aria-hidden="true"></i>
    <i class="icon check" aria-hidden="true"></i>
    <span>Copy</span>
  </button>
</div>

<!-- Copy from any element's text content -->
<code id="snippet">npm install wojo-framework</code>
<button type="button"
        data-wf-trigger="copy"
        data-wf-target="#snippet">Copy</button>

Theme Toggle

Reads and writes the data-theme attribute on <html> and persists the choice in localStorage . Omit data-wf-theme-mode to cycle between the current effective theme (light ↔ dark). Set it to light , dark , or system to jump to a specific mode directly. Any element with data-theme-mode (toolbar toggle buttons) or data-theme-menu-option (dropdown items) is automatically kept in sync.

<!-- Cycle button — flips between current light/dark theme -->
<button data-wf-trigger="toggle-theme"
        data-wf-theme-text-dark="Dark"
        data-wf-theme-text-light="Light">
    <i class="icon sun"></i>
    <span data-wf-theme-text></span>
</button>

<!-- Explicit-mode buttons (toolbar style, auto-synced) -->
<button data-wf-trigger="toggle-theme" data-wf-theme-mode="light">Light</button>
<button data-wf-trigger="toggle-theme" data-wf-theme-mode="dark">Dark</button>
<button data-wf-trigger="toggle-theme" data-wf-theme-mode="system">System</button>

<!-- Standalone sync targets (no trigger required) -->
<button data-theme-mode="light" aria-pressed="false">Light</button>
<button data-theme-mode="dark"  aria-pressed="false">Dark</button>

localStorage & Cookie

Write a key/value to localStorage or a browser cookie on click — useful for persisting user preferences without a round trip to the server. For localStorage use data-wf-storage-key / data-wf-storage-value . For cookies use data-wf-cookie-name / data-wf-cookie-value . Cookie expiry is controlled by data-wf-cookie-days (default: 365). Add the boolean data-wf-storage-remove-empty or data-wf-cookie-remove-empty to delete the entry when the value is an empty string.

<!-- Write to localStorage -->
<button data-wf-trigger="set-localstorage"
        data-wf-storage-key="sidebar-collapsed"
        data-wf-storage-value="true">Collapse sidebar</button>

<!-- Remove from localStorage when value is empty -->
<button data-wf-trigger="set-localstorage"
        data-wf-storage-key="sidebar-collapsed"
        data-wf-storage-value=""
        data-wf-storage-remove-empty>Reset sidebar</button>

<!-- Write a cookie (expires in 7 days) -->
<button data-wf-trigger="set-cookie"
        data-wf-cookie-name="accepted-cookies"
        data-wf-cookie-value="true"
        data-wf-cookie-days="7">Accept cookies</button>

Load More

AJAX pagination without writing JavaScript. The component fetches data-wf-url with limit and offset query parameters appended. Results are appended to the element matched by data-wf-parent and the offset is updated automatically. The endpoint can return plain HTML or a JSON object { html, hasMore, nextOffset } . When hasMore is false the button is disabled and marked aria-disabled . The number of records per request is set with data-wf-records (default: 10).

<!-- List that gets new items appended -->
<ul id="post-list">
    <li>Post 1</li>
    <li>Post 2</li>
    <li>Post 3</li>
</ul>

<button data-wf-trigger="load-more"
        data-wf-url="/api/posts"
        data-wf-parent="#post-list"
        data-wf-records="5">Load more posts</button>

{
    "html": "<li>Post 4</li><li>Post 5</li>",
    "hasMore": true,
    "nextOffset": 8
}

Multi-element Switcher

Use data-wf-trigger="multi-element" to build plan toggles, tab panels, and any pattern that shows one group of elements while hiding all peer groups. Set data-wf-target to a data-attribute name; every element carrying that attribute is shown, and all others in the same group are hidden. Group buttons with data-wf-group , or use <input type="radio"> elements grouped by their shared name attribute.

<!-- Switcher — radio toggle (auto-grouped by name, no data-wf-group needed) -->
<!-- Add data-wf-crossfade to enable smooth opacity crossfade via .wf-swap -->
<div class="wf-toggle-slide wf-toggle-slide-pill">
    <input type="radio" id="plan-m" name="plan" checked
           data-wf-trigger="multi-element"
           data-wf-target="data-plan-monthly"
           data-wf-crossfade>
    <label for="plan-m">Monthly</label>
    <input type="radio" id="plan-y" name="plan"
           data-wf-trigger="multi-element"
           data-wf-target="data-plan-yearly"
           data-wf-crossfade>
    <label for="plan-y">Annually</label>
</div>

<!-- Card grid — wrap each pair in .wf-swap for layout-shift-free crossfade -->
<div class="wf-grid wf-grid-3 wf-gap-4">
    <div class="wf-card">
        <div class="wf-card-body">
            <div class="wf-swap">
                <div data-plan-monthly>
                    <span>$9</span><span> /mo</span>
                </div>
                <div data-plan-yearly class="wf-hidden">
                    <span>$7</span><span> /mo</span>
                    <p>$84 billed annually</p>
                </div>
            </div>
        </div>
    </div>
    <!-- repeat for each tier -->
</div>

<!-- Button group alternative (explicit data-wf-group required) -->
<div class="wf-btn-group">
    <button class="wf-btn wf-btn-primary wf-btn-sm"
            data-wf-trigger="multi-element"
            data-wf-group="pricing-switcher"
            data-wf-target="data-plan-monthly"
            data-wf-crossfade>Monthly</button>
    <button class="wf-btn wf-btn-outlined wf-btn-sm"
            data-wf-trigger="multi-element"
            data-wf-group="pricing-switcher"
            data-wf-target="data-plan-yearly"
            data-wf-crossfade>Annually</button>
</div>

Data Attributes