morethanui 1.0.0

package/js/x-datepicker.js

@@ -0,0 +1,321 @@
+/* MTUI <x-datepicker> — tier: Enhanced over Basic native <input type="date">.
+   Single date only — no ranges, no times (kept out of v1 scope).
+   Basic (no JS): the native date input renders and works normally.
+   <x-datepicker>
+     <label class="field">
+       <span class="t-label">Start date</span>
+       <input type="date" min="2026-01-01" max="2026-12-31" value="2026-07-07">
+     </label>
+   </x-datepicker>
+   Dispatches a bubbling `change` CustomEvent (detail: { value }) on the
+   underlying input, value in the native YYYY-MM-DD format.
+   Tap the header to zoom out: day grid -> month grid -> scrollable year
+   list -> back to day grid. Prev/next step by month/year/scroll-page
+   depending on the current level — faster than repeated month clicks
+   when jumping further than a month or two.                              */
+(function () {
+  'use strict';
+  if (customElements.get('x-datepicker')) return;
+
+  let seq = 0;
+  const iso = (d) => {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+  };
+  const parseIso = (s) => {
+    if (!s) return null;
+    const [y, m, d] = s.split('-').map(Number);
+    return new Date(y, m - 1, d);
+  };
+  const sameDay = (a, b) => a && b
+    && a.getFullYear() === b.getFullYear()
+    && a.getMonth() === b.getMonth()
+    && a.getDate() === b.getDate();
+
+  class XDatepicker extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return;
+      const input = this.querySelector('input[type="date"]');
+      if (!input) return;
+      this._built = true;
+      this._build(input);
+    }
+
+    _build(input) {
+      const panelId = `x-datepicker-panel-${++seq}`;
+      const labelText = this.querySelector('.t-label')?.textContent.trim();
+      const lang = document.documentElement.lang || undefined;
+      const monthFmt = new Intl.DateTimeFormat(lang, { month: 'long', year: 'numeric' });
+      const monthShortFmt = new Intl.DateTimeFormat(lang, { month: 'short' });
+      const weekdayFmt = new Intl.DateTimeFormat(lang, { weekday: 'short' });
+      const min = parseIso(input.min);
+      const max = parseIso(input.max);
+
+      input.setAttribute('tabindex', '-1');
+      input.setAttribute('aria-hidden', 'true');
+      input.style.position = 'absolute';
+      input.style.opacity = '0';
+      input.style.pointerEvents = 'none';
+      input.style.inlineSize = '1px';
+      input.style.blockSize = '1px';
+
+      const trigger = document.createElement('button');
+      trigger.type = 'button';
+      trigger.className = 'select-trigger';
+      trigger.setAttribute('aria-haspopup', 'dialog');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.setAttribute('popovertarget', panelId);
+      if (labelText) trigger.setAttribute('aria-label', labelText);
+      const triggerLabel = document.createElement('span');
+      trigger.append(triggerLabel);
+
+      const panel = document.createElement('div');
+      panel.className = 'datepicker-panel menu';
+      panel.id = panelId;
+      panel.setAttribute('popover', '');
+      if (labelText) panel.setAttribute('aria-label', labelText);
+
+      const header = document.createElement('div');
+      header.className = 'datepicker-header';
+      const prev = document.createElement('button');
+      prev.type = 'button';
+      prev.className = 'datepicker-nav';
+      prev.dataset.dir = 'prev';
+      const headerLabel = document.createElement('button');
+      headerLabel.type = 'button';
+      headerLabel.className = 'datepicker-header-label';
+      const next = document.createElement('button');
+      next.type = 'button';
+      next.className = 'datepicker-nav';
+      next.dataset.dir = 'next';
+      header.append(prev, headerLabel, next);
+
+      const weekdays = document.createElement('div');
+      weekdays.className = 'datepicker-weekdays';
+      const weekStart = new Date(2024, 0, 7); // a Sunday
+      for (let i = 0; i < 7; i++) {
+        const d = document.createElement('span');
+        const day = new Date(weekStart);
+        day.setDate(day.getDate() + i);
+        d.textContent = weekdayFmt.format(day);
+        weekdays.append(d);
+      }
+
+      const grid = document.createElement('div');
+      grid.className = 'datepicker-grid';
+      grid.setAttribute('role', 'grid');
+
+      const footer = document.createElement('div');
+      footer.className = 'datepicker-footer';
+      const todayBtn = document.createElement('button');
+      todayBtn.type = 'button';
+      todayBtn.className = 'btn';
+      todayBtn.setAttribute('data-variant', 'ghost');
+      todayBtn.textContent = 'Today';
+      footer.append(todayBtn);
+
+      panel.append(header, weekdays, grid, footer);
+      input.before(trigger);
+      document.body.append(panel);
+
+      let selected = parseIso(input.value);
+      let viewYear = (selected || new Date()).getFullYear();
+      let viewMonth = (selected || new Date()).getMonth();
+      let viewMode = 'days'; // 'days' | 'months'
+
+      const syncTrigger = () => {
+        triggerLabel.textContent = selected
+          ? new Intl.DateTimeFormat(lang, { dateStyle: 'medium' }).format(selected)
+          : 'Select date';
+      };
+
+      function commit(date) {
+        selected = date;
+        input.value = iso(date);
+        syncTrigger();
+        panel.hidePopover();
+        trigger.focus();
+        input.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: { value: input.value },
+        }));
+      }
+
+      function render() {
+        grid.innerHTML = '';
+        if (viewMode === 'months') {
+          renderMonths();
+        } else if (viewMode === 'years') {
+          renderYears();
+        } else {
+          renderDays();
+        }
+      }
+
+      function renderDays() {
+        weekdays.hidden = false;
+        grid.setAttribute('data-view', 'days');
+        headerLabel.textContent = monthFmt.format(new Date(viewYear, viewMonth, 1));
+        prev.setAttribute('aria-label', 'Previous month');
+        next.setAttribute('aria-label', 'Next month');
+
+        const firstOfMonth = new Date(viewYear, viewMonth, 1);
+        const startOffset = firstOfMonth.getDay(); // Sunday-start grid (v1)
+        const gridStart = new Date(viewYear, viewMonth, 1 - startOffset);
+        const today = new Date();
+
+        for (let i = 0; i < 42; i++) {
+          const day = new Date(gridStart);
+          day.setDate(day.getDate() + i);
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'datepicker-day';
+          btn.setAttribute('role', 'gridcell');
+          btn.textContent = String(day.getDate());
+          btn.dataset.iso = iso(day);
+          if (day.getMonth() !== viewMonth) btn.dataset.outside = '';
+          if (sameDay(day, today)) btn.setAttribute('data-today', '');
+          if (sameDay(day, selected)) btn.setAttribute('aria-selected', 'true');
+          if ((min && day < min) || (max && day > max)) btn.disabled = true;
+          btn.tabIndex = sameDay(day, selected) || (!selected && sameDay(day, today)) ? 0 : -1;
+          btn.addEventListener('click', () => commit(new Date(day)));
+          grid.append(btn);
+        }
+      }
+
+      function renderMonths() {
+        weekdays.hidden = true;
+        grid.setAttribute('data-view', 'months');
+        headerLabel.textContent = String(viewYear);
+        prev.setAttribute('aria-label', 'Previous year');
+        next.setAttribute('aria-label', 'Next year');
+
+        for (let m = 0; m < 12; m++) {
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'datepicker-day datepicker-month';
+          btn.setAttribute('role', 'gridcell');
+          btn.textContent = monthShortFmt.format(new Date(viewYear, m, 1));
+          if (m === viewMonth) btn.setAttribute('aria-selected', 'true');
+          btn.tabIndex = m === viewMonth ? 0 : -1;
+          btn.addEventListener('click', () => {
+            viewMonth = m;
+            viewMode = 'days';
+            render();
+            grid.querySelector('[tabindex="0"]')?.focus();
+          });
+          grid.append(btn);
+        }
+      }
+
+      function renderYears() {
+        weekdays.hidden = true;
+        grid.setAttribute('data-view', 'years');
+        headerLabel.textContent = 'Select year';
+        prev.setAttribute('aria-label', 'Scroll up');
+        next.setAttribute('aria-label', 'Scroll down');
+
+        const rangeStart = min ? min.getFullYear() : viewYear - 100;
+        const rangeEnd = max ? max.getFullYear() : viewYear + 100;
+        for (let y = rangeStart; y <= rangeEnd; y++) {
+          const btn = document.createElement('button');
+          btn.type = 'button';
+          btn.className = 'datepicker-day datepicker-year';
+          btn.setAttribute('role', 'gridcell');
+          btn.textContent = String(y);
+          if (y === viewYear) btn.setAttribute('aria-selected', 'true');
+          btn.tabIndex = y === viewYear ? 0 : -1;
+          btn.addEventListener('click', () => {
+            viewYear = y;
+            viewMode = 'months';
+            render();
+            grid.querySelector('[tabindex="0"]')?.focus();
+          });
+          grid.append(btn);
+        }
+        // bring the current year into view without an initial janky jump —
+        // reduced motion collapses --t-lift to 0ms, so this stays instant.
+        const smooth = (parseFloat(getComputedStyle(document.documentElement)
+          .getPropertyValue('--t-lift')) || 0) > 0;
+        requestAnimationFrame(() => {
+          grid.querySelector('[aria-selected="true"]')
+            ?.scrollIntoView({ block: 'center', behavior: smooth ? 'smooth' : 'auto' });
+        });
+      }
+
+      headerLabel.addEventListener('click', () => {
+        viewMode = viewMode === 'days' ? 'months' : viewMode === 'months' ? 'years' : 'days';
+        render();
+        grid.querySelector('[tabindex="0"]')?.focus();
+      });
+
+      prev.addEventListener('click', () => {
+        if (viewMode === 'years') {
+          grid.scrollBy({ top: -grid.clientHeight * 0.9 });
+        } else if (viewMode === 'months') {
+          viewYear -= 1;
+          render();
+        } else {
+          viewMonth -= 1;
+          if (viewMonth < 0) { viewMonth = 11; viewYear -= 1; }
+          render();
+        }
+      });
+      next.addEventListener('click', () => {
+        if (viewMode === 'years') {
+          grid.scrollBy({ top: grid.clientHeight * 0.9 });
+        } else if (viewMode === 'months') {
+          viewYear += 1;
+          render();
+        } else {
+          viewMonth += 1;
+          if (viewMonth > 11) { viewMonth = 0; viewYear += 1; }
+          render();
+        }
+      });
+      todayBtn.addEventListener('click', () => {
+        const t = new Date();
+        viewYear = t.getFullYear();
+        viewMonth = t.getMonth();
+        viewMode = 'days';
+        render();
+        commit(t);
+      });
+
+      grid.addEventListener('keydown', (e) => {
+        const current = document.activeElement.closest('.datepicker-day');
+        if (!current) return;
+        const cells = [...grid.children];
+        const idx = cells.indexOf(current);
+        const rowSpan = viewMode === 'months' ? 4 : viewMode === 'years' ? 1 : 7;
+        const moves = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: rowSpan, ArrowUp: -rowSpan };
+        if (e.key in moves) {
+          e.preventDefault();
+          const target = cells[idx + moves[e.key]];
+          if (target) { target.tabIndex = 0; current.tabIndex = -1; target.focus(); }
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (!current.disabled) current.click();
+        }
+      });
+
+      panel.addEventListener('toggle', (e) => {
+        const open = e.newState === 'open';
+        trigger.setAttribute('aria-expanded', String(open));
+        if (open) {
+          viewYear = (selected || new Date()).getFullYear();
+          viewMonth = (selected || new Date()).getMonth();
+          viewMode = 'days';
+          render();
+          grid.querySelector('[tabindex="0"]')?.focus();
+        }
+      });
+
+      syncTrigger();
+    }
+  }
+
+  customElements.define('x-datepicker', XDatepicker);
+})();

package/js/x-select.js

@@ -0,0 +1,139 @@
+/* MTUI <x-select> — tier: Enhanced over Basic .select (native <select>).
+   Wraps existing Basic field-select markup, hides the native select from
+   sight (kept as the value holder + no-JS fallback + form participant),
+   and draws an MTUI trigger + popover-ring listbox panel in its place.
+   Basic (no JS): the native select renders and works normally.
+   <x-select>
+     <label class="field">
+       <span class="t-label">Role</span>
+       <span class="select"><select>
+         <option value="designer">Designer</option>
+         <option value="engineer" selected>Engineer</option>
+       </select></span>
+     </label>
+   </x-select>
+   Dispatches a bubbling `change` CustomEvent (detail: { value }) on the
+   underlying <select> whenever the value changes via the panel.          */
+(function () {
+  'use strict';
+  if (customElements.get('x-select')) return;
+
+  let seq = 0;
+
+  class XSelect extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return;
+      const select = this.querySelector('select');
+      if (!select) return; // nothing to enhance
+      this._built = true;
+      this._build(select);
+    }
+
+    _build(select) {
+      const wrap = select.closest('.select') || select;
+      const panelId = `x-select-panel-${++seq}`;
+      const labelText = this.querySelector('.t-label')?.textContent.trim();
+
+      wrap.style.display = 'none';
+      select.setAttribute('tabindex', '-1');
+      select.setAttribute('aria-hidden', 'true');
+
+      const trigger = document.createElement('button');
+      trigger.type = 'button';
+      trigger.className = 'select-trigger';
+      trigger.setAttribute('aria-haspopup', 'listbox');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.setAttribute('popovertarget', panelId);
+      if (labelText) trigger.setAttribute('aria-label', labelText);
+      if (select.disabled) trigger.disabled = true;
+      const label = document.createElement('span');
+      trigger.append(label);
+
+      const panel = document.createElement('div');
+      panel.className = 'select-panel menu';
+      panel.id = panelId;
+      panel.setAttribute('popover', '');
+      panel.setAttribute('role', 'listbox');
+      if (labelText) panel.setAttribute('aria-label', labelText);
+
+      const options = [...select.options].map((opt, i) => {
+        const row = document.createElement('button');
+        row.type = 'button';
+        row.className = 'menu-item select-option';
+        row.textContent = opt.textContent;
+        row.setAttribute('role', 'option');
+        row.dataset.index = String(i);
+        if (opt.disabled) {
+          row.disabled = true;
+          row.setAttribute('aria-disabled', 'true');
+        }
+        row.addEventListener('click', () => commit(i));
+        panel.append(row);
+        return row;
+      });
+
+      wrap.before(trigger);
+      document.body.append(panel); // top layer via popover; anchored by js/menu.js
+
+      const syncFace = () => {
+        label.textContent = select.options[select.selectedIndex]?.textContent || '';
+        options.forEach((row, i) => {
+          const selected = i === select.selectedIndex;
+          row.setAttribute('aria-selected', String(selected));
+        });
+      };
+      syncFace();
+
+      function commit(index) {
+        const changed = select.selectedIndex !== index;
+        select.selectedIndex = index;
+        syncFace();
+        panel.hidePopover();
+        trigger.focus();
+        if (changed) {
+          select.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            detail: { value: select.value },
+          }));
+        }
+      }
+
+      panel.addEventListener('keydown', (e) => {
+        const enabled = options.filter((r) => !r.disabled);
+        const current = document.activeElement.closest('.select-option');
+        const idx = enabled.indexOf(current);
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          (enabled[idx + 1] || enabled[0])?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          (enabled[idx - 1] || enabled[enabled.length - 1])?.focus();
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          enabled[0]?.focus();
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          enabled[enabled.length - 1]?.focus();
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (current) commit(Number(current.dataset.index));
+        } else if (e.key.length === 1) {
+          const match = enabled.find((r) =>
+            r.textContent.trim().toLowerCase().startsWith(e.key.toLowerCase()));
+          match?.focus();
+        }
+      });
+
+      panel.addEventListener('toggle', (e) => {
+        const open = e.newState === 'open';
+        trigger.setAttribute('aria-expanded', String(open));
+        if (open) {
+          panel.style.minWidth = `${trigger.getBoundingClientRect().width}px`;
+          (options[select.selectedIndex] || options[0])?.focus();
+        }
+      });
+    }
+  }
+
+  customElements.define('x-select', XSelect);
+})();

package/js/x-tabs.js

@@ -0,0 +1,48 @@
+/* MTUI <x-tabs> — tier: Enhanced over Basic segmented.
+   Upgrades a .segmented radio group + [data-panel] siblings in place:
+   only the panel matching the checked radio's value shows.
+   Basic (JS off): all panels render, radios still select — functional.
+   Keyboard: native radio arrow-key behavior is the tab navigation.
+   Events: bubbling `change` CustomEvent with detail { value } (the native
+   radio change also bubbles through; listeners can read detail?.value ??
+   el.value).                                                                */
+(function () {
+  'use strict';
+  if (customElements.get('x-tabs')) return;
+
+  class XTabs extends HTMLElement {
+    connectedCallback() {
+      this.addEventListener('change', this);
+      this._sync(false);
+    }
+
+    disconnectedCallback() {
+      this.removeEventListener('change', this);
+    }
+
+    get value() {
+      const checked = this.querySelector('.segmented input:checked');
+      return checked ? checked.value : null;
+    }
+
+    handleEvent(e) {
+      if (e.target === this || !e.target.matches('.segmented input')) return;
+      this._sync(true);
+    }
+
+    _sync(emit) {
+      const value = this.value;
+      this.querySelectorAll('[data-panel]').forEach((panel) => {
+        panel.hidden = panel.dataset.panel !== value;
+      });
+      if (emit) {
+        this.dispatchEvent(new CustomEvent('change', {
+          bubbles: true,
+          detail: { value },
+        }));
+      }
+    }
+  }
+
+  customElements.define('x-tabs', XTabs);
+})();

package/js/x-theme.js

@@ -0,0 +1,154 @@
+/* MTUI <x-theme> — tier: JS-only (an in-app theme switcher inherently needs
+   JS; without it the element is empty and the app keeps its current/persisted
+   theme, still functional and on-language).
+
+   The Telegram "Appearance" panel, MTUI-native: flip theme, tap an accent,
+   set corners + density. Writes ONLY to the <html> knobs (root-only rule,
+   DESIGN.md) and persists each choice to localStorage so it survives reloads.
+   Built from canonical .segmented groups + a row of accent dots; accent
+   colors are sampled live from tokens.css (never hard-coded).
+
+   Canonical markup — just the empty element; it renders its own controls:
+     <x-theme></x-theme>
+
+   Emits a bubbling CustomEvent on every change:
+     'themechange', detail: { key, value }   // key: theme|accent|radius|density|tint
+
+   localStorage keys: mtui-theme, mtui-accent, mtui-radius, mtui-density, mtui-tint.
+   Precedence on load: a stored value (only if it's a valid option) > current
+   <html> attribute > default. */
+(function () {
+  'use strict';
+
+  const KNOBS = [
+    { key: 'theme', attr: 'data-theme', label: 'Appearance',
+      opts: [['light', 'Light'], ['dark', 'Dark']] },
+    { key: 'accent', attr: 'data-accent', label: 'Accent', swatch: true,
+      opts: [['clay', 'Clay'], ['cobalt', 'Cobalt'], ['fern', 'Fern'], ['plum', 'Plum']] },
+    { key: 'radius', attr: 'data-radius', label: 'Corners',
+      opts: [['round', 'Round'], ['soft', 'Soft'], ['sharp', 'Sharp']] },
+    { key: 'density', attr: 'data-density', label: 'Density',
+      opts: [['comfortable', 'Comfortable'], ['compact', 'Compact']] },
+    { key: 'tint', attr: 'data-tint', label: 'Surface tint',
+      opts: [['accent', 'Accent'], ['warm', 'Warm']] },
+  ];
+  const byKey = (k) => KNOBS.find((x) => x.key === k);
+
+  const store = {
+    get(key) { try { return localStorage.getItem('mtui-' + key); } catch (e) { return null; } },
+    set(key, val) { try { localStorage.setItem('mtui-' + key, val); } catch (e) { /* storage off */ } },
+  };
+
+  // Read each accent's solid --accent from the stylesheet by briefly swapping
+  // the root knob (root-only; all swaps + restore happen in one sync turn, so
+  // nothing paints in between — no flash). Never invents a hex value.
+  function sampleAccents(root, values) {
+    const prev = root.getAttribute('data-accent');
+    const cs = getComputedStyle(root);
+    const out = {};
+    try {
+      values.forEach((v) => {
+        root.setAttribute('data-accent', v);
+        out[v] = cs.getPropertyValue('--accent').trim();
+      });
+    } finally {
+      // Always restore, even if reading a value throws — never strand the
+      // root on a sampled accent.
+      if (prev === null) root.removeAttribute('data-accent');
+      else root.setAttribute('data-accent', prev);
+    }
+    return out;
+  }
+
+  let uid = 0;
+
+  class ThemeControl extends HTMLElement {
+    connectedCallback() {
+      if (this._built) return; // guard re-entry on move/reparent
+      this._built = true;
+      const root = document.documentElement;
+      const id = ++uid;
+
+      const accentColors = sampleAccents(root, byKey('accent').opts.map((o) => o[0]));
+
+      // Resolve + apply each knob (stored pref wins) before reflecting state.
+      const current = {};
+      KNOBS.forEach((k) => {
+        // Prefer a stored pref only if it's a real option (guards corrupt/stale
+        // localStorage); otherwise keep the current attribute — which may be a
+        // legit non-preset like data-accent="custom" from the generator/Telegram
+        // — and never clobber it with the default.
+        const stored = store.get(k.key);
+        const valid = stored && k.opts.some(([v]) => v === stored);
+        const val = (valid ? stored : root.getAttribute(k.attr)) || k.opts[0][0];
+        root.setAttribute(k.attr, val);
+        current[k.key] = val;
+      });
+
+      const panel = document.createElement('div');
+      panel.className = 'theme-panel';
+
+      KNOBS.forEach((k) => {
+        const group = document.createElement('div');
+        group.className = 'theme-group';
+
+        const label = document.createElement('span');
+        label.className = 't-label';
+        label.textContent = k.label;
+        group.appendChild(label);
+
+        const name = `mtui-${k.key}-${id}`;
+        const container = document.createElement(k.swatch ? 'div' : 'fieldset');
+        container.dataset.knob = k.key;
+        container.className = k.swatch ? 'theme-accents' : 'segmented';
+        if (k.swatch) {
+          container.setAttribute('role', 'radiogroup');
+          container.setAttribute('aria-label', k.label);
+        }
+
+        k.opts.forEach(([value, text]) => {
+          const optLabel = document.createElement('label');
+          optLabel.className = k.swatch ? 'theme-accent' : '';
+          if (k.swatch) optLabel.style.setProperty('--dot', accentColors[value] || 'var(--accent)');
+
+          const input = document.createElement('input');
+          input.type = 'radio';
+          input.name = name;
+          input.value = value;
+          input.checked = current[k.key] === value;
+          if (k.swatch) input.setAttribute('aria-label', text);
+          optLabel.appendChild(input);
+
+          const face = document.createElement('span');
+          face.className = k.swatch ? 'theme-accent-dot' : '';
+          if (!k.swatch) face.textContent = text;
+          optLabel.appendChild(face);
+
+          container.appendChild(optLabel);
+        });
+
+        group.appendChild(container);
+        panel.appendChild(group);
+      });
+
+      this.replaceChildren(panel);
+
+      this.addEventListener('change', (e) => {
+        const input = e.target.closest('input[type="radio"]');
+        if (!input) return;
+        const holder = input.closest('[data-knob]');
+        if (!holder) return;
+        const key = holder.dataset.knob;
+        const value = input.value;
+        document.documentElement.setAttribute(byKey(key).attr, value);
+        store.set(key, value);
+        this.dispatchEvent(new CustomEvent('themechange', {
+          bubbles: true,
+          detail: { key, value },
+        }));
+      });
+    }
+  }
+
+  if (!customElements.get('x-theme')) customElements.define('x-theme', ThemeControl);
+})();