frontend components

1<d-checkbox text="enable notifications" checked name="notifications" value="1"></d-checkbox>

1const checkbox = select('d-checkbox');
2 
3// get or set checked state
4checkbox.checked = true;
5 
6// update label text
7checkbox.text = 'allow telemetry';
8 
9// update form payload name and value
10checkbox.name = 'telemetry';
11checkbox.value = 'accepted';

1<d-color-picker value="#3b82f6" name="theme_color" label="accent color"></d-color-picker>

1const picker = select('d-color-picker');
2 
3// toggle popup panel visibility
4picker.toggle();
5 
6// programmatically set hex color
7picker.setHex('#ef4444');
8 
9// read color state
10console.log(picker.hex); // current hex string
11console.log(picker.h, picker.s, picker.b, picker.a); // hsb and alpha values

1<d-combobox
2  placeholder="select department"
3  allow-search
4  allow-input
5  name="department">
6  <option value="eng" selected>engineering</option>
7  <option value="des">product design</option>
8  <option value="ops">operations</option>
9</d-combobox>

1const combo = select('d-combobox');
2 
3// add option dynamically
4combo.addOption('mktg', 'marketing');
5 
6// remove option by value
7combo.removeOption('ops');
8 
9// clear all options
10combo.clearOptions();
11 
12// set selected value programmatically
13combo.value = 'eng';
14 
15// close all open comboboxes across document
16dCombobox.closeAll();

1<div class="card p-2">
2  right click inside this card
3  <d-context-menu>
4    <span>copy link</span>
5    <span>duplicate item</span>
6    <span>delete</span>
7  </d-context-menu>
8</div>

1const menu = select('d-context-menu');
2 
3// open context menu programmatically (optionally passing pointer event for cursor positioning)
4menu.open();
5menu.open(pointerEvent);
6 
7// close context menu
8menu.close();
9 
10// toggle context menu
11menu.toggle();
12 
13// listen to item selection (e.detail is the clicked element)
14listen(menu, 'click', (e) => {
15  const target = e.target;
16  const action = target.closest('[data-action]')?.getAttribute('data-action');
17  if (action) handleAction(action);
18});

1<d-drawer direction="left" id="main-drawer">
2  <nav class="flex-column g-1 p-2">
3    <a href="/dashboard">dashboard</a>
4    <a href="/settings">settings</a>
5  </nav>
6</d-drawer>

1const drawer = select('d-drawer');
2 
3// open drawer (returns promise that resolves after animation completes)
4await drawer.open();
5 
6// close drawer (returns promise)
7await drawer.close();
8 
9// toggle drawer
10await drawer.toggle();
11 
12// inspect animation and open state
13console.log(drawer.isOpened, drawer.isAnimating);

1<d-dropdown header="account security">
2  <div class="p-1 flex-column g-1">
3    <d-checkbox text="two factor authentication"></d-checkbox>
4    <a href="/sessions" class="btn btn-sm">manage active sessions</a>
5  </div>
6</d-dropdown>

1const dropdown = select('d-dropdown');
2 
3// open dropdown
4dropdown.open();
5 
6// close dropdown
7dropdown.close();
8 
9// toggle dropdown
10dropdown.toggle();
11 
12// inspect open state
13console.log(dropdown.isOpened);

1<d-file-input accept=".pdf,.zip,.csv" name="documents" multiple compact></d-file-input>

1const fileInput = select('d-file-input');
2 
3// reset dropzone, clearing value, file list, and native input
4fileInput.reset();
5 
6// inspect selected files
7console.log(fileInput.value); // File instance or File[] array

1<nav class="nav">
2  <div class="container flex-row align-center justify-between py-1">
3    <a d-link href="/" class="flex-row align-center">
4      <img src="/img/logo.png" alt="logo">
5    </a>
6 
7    <div id="nav-links" class="flex-row align-center g-2 md:d-flex d-none">
8      <a d-link href="/features" class="nav-link">features</a>
9      <div d-submenu="framework">
10        <a d-link href="/architecture">architecture</a>
11        <a d-link href="/benchmarks">benchmarks</a>
12      </div>
13    </div>
14 
15    <d-hamburger target="#nav-links" breakpoint="md">
16      <div slot="header">
17        <img src="/img/logo.png" class="logo-mark">
18      </div>
19      <div slot="footer">
20        <d-text-input placeholder="search docs"></d-text-input>
21      </div>
22    </d-hamburger>
23  </div>
24</nav>

1const hamburger = select('d-hamburger');
2 
3// open overlay (returns promise)
4await hamburger.open();
5 
6// close overlay (returns promise)
7await hamburger.close();
8 
9// toggle overlay
10await hamburger.toggle();
11 
12// navigate into a specific subcategory panel programmatically
13hamburger.navigateTo(subPanelElement, 'framework');
14 
15// navigate back to previous parent panel
16hamburger.navigateBack();
17 
18// close all open hamburger instances across the page
19dHamburger.closeAll();

1<d-hold-button delay="1500" class="btn btn-red" type="submit">
2  hold to delete database
3</d-hold-button>

1const holdBtn = select('d-hold-button');
2 
3// adjust required hold duration in ms
4holdBtn.delay = 2000;
5 
6// toggle disabled state
7holdBtn.disabled = true;

1<d-icon-button icon="dstrn-heart-line" size="2em" color="var(--content-l)" activecolor="var(--red)"></d-icon-button>

1<d-image-input accept="image/png,image/jpeg" name="avatar" fit="cover" placeholder="drop profile photo"></d-image-input>

1const imgInput = select('d-image-input');
2 
3// reset dropzone and clear image preview
4imgInput.reset();
5 
6// get or set preview src directly
7imgInput.preview = '/img/avatar.png';
8 
9// read selected File instance
10console.log(imgInput.value);

1<d-loader style="width: 2em; height: 2em;"></d-loader>

1const loader = select('d-loader');
2 
3// destroy loader and disconnect observers
4loader.destroy();

1<d-modal id="confirm-modal" persistent>
2  <div class="flex-column g-1">
3    <h3>confirm deletion</h3>
4    <p class="text-content-l">this action cannot be undone.</p>
5    <div class="flex-row justify-end g-1 mt-1">
6      <button class="btn btn-sm" onclick="this.closest('d-modal').close()">cancel</button>
7      <button class="btn btn-sm btn-red">delete</button>
8    </div>
9  </div>
10</d-modal>

1const modal = select('d-modal');
2 
3// open modal (locks body scroll)
4modal.open();
5 
6// close modal (runs exit animation and unlocks body scroll)
7modal.close();
8 
9// close, await exit transition, and remove element from dom
10await modal.destroy();

1<d-morph name="summary-card" d-action="click" d-to="detail-card" d-duration="350" d-visible>
2  <div class="card p-2">
3    <h4>project summary</h4>
4    <p>click to expand details</p>
5  </div>
6</d-morph>
7 
8<d-morph name="detail-card" d-action="click" d-to="summary-card" d-duration="350">
9  <div class="card p-4">
10    <h4>detailed project view</h4>
11    <p>full metadata and extended controls</p>
12  </div>
13</d-morph>

1// get a morph element instance by name
2const morph = dMotion.get('summary-card');
3 
4// get the immediately previous morph element
5const prev = dMotion.getPrevious();
6 
7// programmatically trigger a transition between two named elements
8await dMotion.transition('summary-card', 'detail-card', optionalTriggerNode);
9 
10// register transition lifecycle hooks ('before' or 'after')
11dMotion.listen('summary-card', 'detail-card', () => {
12  console.log('transition starting');
13}, 'before');
14 
15// unregister hook
16dMotion.unlisten('summary-card', 'detail-card', callback, 'before');
17 
18// component methods on <d-morph>
19morph.show();
20morph.hide();

1<d-notification timer="4000" opened>
2  <p>project settings saved successfully</p>
3</d-notification>

1const toast = select('d-notification');
2 
3// show toast and start progress bar countdown
4toast.show();
5 
6// hide toast
7toast.hide();
8 
9// hide, wait for animation to finish, and remove from dom
10await toast.destroy();

1<d-skeleton type="text" lines="3" gap="0.5em"></d-skeleton>
2<d-skeleton type="circle" size="3em"></d-skeleton>
3<d-skeleton type="rect" width="100%" height="150px" radius="0.5em"></d-skeleton>
4<d-skeleton type="card"></d-skeleton>

1<d-slider id="volume" name="volume" min="0" max="1" step="0.01" value="0.75"></d-slider>
2<span data-slider-volume class="text-content-l">75%</span>

1const slider = select('d-slider');
2 
3// read current value
4const current = slider.getValue();
5 
6// set new value (updates visual fill, thumb position, and data-slider indicator)
7slider.setValue(0.85);

1<d-text-input
2  placeholder="search records"
3  icon="dstrn-search-line"
4  shortcut="cmd+k"
5  name="query">
6</d-text-input>

1const input = select('d-text-input');
2 
3// update value
4input.value = 'search term';
5 
6// read or modify properties
7input.placeholder = 'type command';
8input.disabled = false;

1<d-toggle name="billing_period" value="0">
2  <div default>monthly billing</div>
3  <div>annual billing (save 20%)</div>
4</d-toggle>

1const toggle = select('d-toggle');
2 
3// get currently active button element
4console.log(toggle.selected);
5 
6// activate option by index (number), string index, or button element
7toggle.selected = 1;
8 
9// read or set numeric value
10toggle.value = 0;

1// public/js/components/dCheckbox.js
2class dCheckbox extends dComponent {
3  static form = true;
4  static get tag() { return 'd-checkbox'; }
5 
6  // custom template or methods
7}
8 
9dComponent.define(dCheckbox);

1class dCounter extends dComponent {
2  static tag = 'd-counter';
3  static form = true; // opt into native form submission integration
4 
5  static props = {
6    value: { type: 'number', default: 0, form: true },
7    step: { type: 'number', default: 1 },
8    disabled: { type: 'boolean', default: false },
9    label: { type: 'string', default: 'count' }
10  };
11 
12  template() {
13    // called once on mount to establish initial innerHTML
14    return `
15      <span class="label">${this.label}</span>
16      <button class="dec" type="button">−</button>
17      <span class="value">${this.value}</span>
18      <button class="inc" type="button">+</button>
19    `;
20  }
21 
22  mount() {
23    // called once after template initialization
24    this.effect(() => {
25      // reading this.state or props registers auto dependencies
26      document.title = `count: ${this.state.value ?? this.value}`;
27      return () => { document.title = 'app'; }; // optional cleanup
28    });
29  }
30 
31  render() {
32    // called automatically on prop or state changes
33    // use for surgical dom updates only (never mutate this.state here)
34    this.refs('.value')[0].textContent = this.state.value ?? this.value;
35    this.refs('button.dec')[0].disabled = this.disabled;
36    this.refs('button.inc')[0].disabled = this.disabled;
37 
38    // listeners attached inside render() are cleared and rebound automatically
39    this.listen(this.refs('button.dec')[0], 'click', () => this.decrement());
40    this.listen(this.refs('button.inc')[0], 'click', () => this.increment());
41  }
42 
43  onPropChanged(name, oldVal, newVal) {
44    // called on attribute or property modifications
45  }
46 
47  increment() {
48    this.setState(s => { s.value = (s.value ?? this.value) + this.step; });
49  }
50 
51  decrement() {
52    this.setState(s => { s.value = (s.value ?? this.value) - this.step; });
53  }
54}
55 
56dComponent.define(dCounter);

1dComponent.define(dCounter);

1// parse html into a cached template fragment (avoids repeated innerHTML string parsing)
2const frag = dComponent.fragment('<div class="list-item"><span>title</span></div>');
3 
4// append multiple nodes, fragments, or html strings in a single dom operation
5dComponent.appendMany(container, frag1, frag2, '<div class="extra">item</div>');

1// multiple synchronous state mutations trigger exactly one render cycle in the next microtask
2this.state.title = 'new title';
3this.state.count = 42;

1// update state and trigger microtask batched render()
2this.setState({ active: true });
3 
4// functional updater
5this.setState(s => { s.count++; s.updatedAt = Date.now(); });
6 
7// update state without triggering render() (still triggers effect loops)
8this.setState({ timer: Date.now() }, false);

1// auto tracking effect (tracks any accessed this.state or prop)
2this.effect(() => {
3  console.log('value updated:', this.state.value);
4  return () => console.log('cleaning up effect');
5});
6 
7// explicit dependency array effect
8this.effect(() => {
9  fetchData(this.query);
10}, () => [this.query]);

1// event listener with auto cleanup
2this.listen(element, 'click', (e) => this.handleClick(e));
3 
4// listen to multiple elements
5this.listenAll(elements, 'click', (e) => this.handleClick(e));
6 
7// unlisten manually if needed
8this.unlisten(element, 'click', handler);
9 
10// auto cleared timers
11this.setTimeout(() => this.tick(), 1000);
12this.setInterval(() => this.refresh(), 5000);
13 
14// auto cleared animation frame
15this.requestAnimationFrame((time) => this.draw(time));

1const [inputEl] = this.refs('input.search');

1this.originalChildren // array of cloned child nodes
2this.originalHTML     // original innerHTML string
3this.cloneChildren()  // returns fresh clones of original child nodes

1static form = true;
2static props = {
3  value: { type: 'string', default: '', form: true }
4};
5 
6// access parent form element
7console.log(this.form);

1// listen to component events
2this.on('custom-event', (data) => console.log(data));
3 
4// remove listener
5this.off('custom-event', handler);
6 
7// emit event to internal listeners
8this.emit('custom-event', { id: 123 });

1// emit event through global websocket connection
2this.wire('chat:send', { message: 'hello' });