@omega.js/web 0.1.0

package/core/icons/flags/uy.svg

@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 152 152" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><g id="_33.uruguay" data-name="33.uruguay"><path id="path" d="m124.81 149.4a459 459 0 0 1 -97.62 0 27.69 27.69 0 0 1 -24.59-24.59 459 459 0 0 1 0-97.62 27.69 27.69 0 0 1 24.59-24.59 459 459 0 0 1 97.62 0 27.69 27.69 0 0 1 24.59 24.59 459 459 0 0 1 0 97.62 27.69 27.69 0 0 1 -24.59 24.59z" fill="#f0f9ff"/><g fill="#406bd4"><path d="m151.61 95.05q-.41 9.53-1.19 19h-148.84q-.79-9.52-1.19-19z"/><path d="m147.14 133.16a27.65 27.65 0 0 1 -22.33 16.23 459 459 0 0 1 -97.62 0 27.65 27.65 0 0 1 -22.33-16.23z"/><path d="m150.42 37.89h-74.42v-19h71.15a27.66 27.66 0 0 1 2.25 8.34q.6 5.3 1.02 10.66z"/><path d="m152 76h-76v-19.06h75.61q.39 9.53.39 19.06z"/></g><path d="m53.22 43.69a1 1 0 0 1 -.59-.77 1 1 0 0 1 .37-.92 5 5 0 0 0 -4-8.79 1 1 0 0 1 -.92-.34.94.94 0 0 1 -.2-1 5 5 0 0 0 -8.13-5.23 1 1 0 0 1 -.95.22.94.94 0 0 1 -.68-.7 5 5 0 0 0 -9.68 0 .94.94 0 0 1 -.68.7 1 1 0 0 1 -.95-.22 5 5 0 0 0 -8.13 5.23.94.94 0 0 1 -.2 1 1 1 0 0 1 -.91.34 5 5 0 0 0 -4 8.79 1 1 0 0 1 .35.91 1 1 0 0 1 -.59.77 5 5 0 0 0 1.37 9.58 1 1 0 0 1 .71 1.54 5 5 0 0 0 6.33 7.31 1 1 0 0 1 1.43.92 5 5 0 0 0 9.28 2.73 1 1 0 0 1 1.7 0 5 5 0 0 0 4.27 2.39 4.92 4.92 0 0 0 1.36-.15 5 5 0 0 0 3.6-5 1 1 0 0 1 1.43-.92 5 5 0 0 0 6.33-7.31 1 1 0 0 1 -.08-1 1 1 0 0 1 .79-.57 5 5 0 0 0 1.37-9.58z" fill="#ffcb24"/></g></g></svg>

package/core/icons/flags/vn.svg

@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 152 152" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><g id="vietnam" data-name="vietnam"><path id="path" d="m124.81 149.4a459 459 0 0 1 -97.62 0 27.69 27.69 0 0 1 -24.59-24.59 459 459 0 0 1 0-97.62 27.69 27.69 0 0 1 24.59-24.59 459 459 0 0 1 97.62 0 27.69 27.69 0 0 1 24.59 24.59 459 459 0 0 1 0 97.62 27.69 27.69 0 0 1 -24.59 24.59z" fill="#f40055"/><g transform="translate(20,0)"><path d="m84.77 66.21a5 5 0 0 0 -4.77-3.46h-12a3.67 3.67 0 0 1 -3.5-2.54l-3.78-11.47a5 5 0 0 0 -9.53 0l-3.72 11.47a3.67 3.67 0 0 1 -3.47 2.54h-12.09a5 5 0 0 0 -2.91 9.07l9.76 7.08a3.69 3.69 0 0 1 1.3 4.1l-3.73 11.49a5 5 0 0 0 7.71 5.6l9.76-7.09a3.66 3.66 0 0 1 4.32 0l9.76 7.09a5 5 0 0 0 7.71-5.6l-3.73-11.49a3.68 3.68 0 0 1 1.34-4.1l9.8-7.08a5 5 0 0 0 1.82-5.61z" fill="#ffcb24"/></g></g></g></svg>

package/core/icons/flags/za.svg

@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 152 152" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_2" data-name="Layer 2"><g id="_10.south_africa" data-name="10.south africa"><path id="path" d="m124.81 149.4a459 459 0 0 1 -97.62 0 27.69 27.69 0 0 1 -24.59-24.59 459 459 0 0 1 0-97.62 27.69 27.69 0 0 1 24.59-24.59 459 459 0 0 1 97.62 0 27.69 27.69 0 0 1 24.59 24.59 459 459 0 0 1 0 97.62 27.69 27.69 0 0 1 -24.59 24.59z" fill="#f0f9ff"/><path d="m151.45 98.41c0 .48 0 1-.07 1.46h-91.09l-53.43 37c-.14-.21-.28-.43-.41-.65a27.8 27.8 0 0 1 -3.83-11.37q-1.07-10-1.7-20-.37-6-.59-11.91-.63-17 0-34 .22-5.94.6-11.85.63-10 1.69-19.9a27.65 27.65 0 0 1 3.92-11.51 3.45 3.45 0 0 1 .2-.32l53.71 37.56h91v.42q1.12 22.57 0 45.07z" fill="#39b44a"/><path d="m42.41 75.89a5.17 5.17 0 0 1 -2.41 4.39l-39.08 24.51q-.37-6-.59-11.91-.63-17 0-34 .22-5.88.6-11.79l39.07 24.42a5.16 5.16 0 0 1 2.41 4.38z" fill="#ffcb24"/><path d="m27.48 75.89-27.15 16.99q-.63-17 0-34z" fill="#141a1a"/><path d="m151 106.33v.43q-.6 9-1.57 18a27.68 27.68 0 0 1 -24.59 24.58 458.83 458.83 0 0 1 -97.6 0 27.51 27.51 0 0 1 -14.49-6l-.41-.33 53.17-36.67z" fill="#406bd4"/><path d="m151 45.35h-85.35l-53.11-36.58.29-.24a27.62 27.62 0 0 1 14.38-5.92 458.83 458.83 0 0 1 97.6 0 27.68 27.68 0 0 1 24.59 24.58q1 8.93 1.56 17.85a3 3 0 0 0 .04.31z" fill="#f40055"/></g></g></svg>

package/core/js/core/analytics-loader.js

@@ -0,0 +1,253 @@
+/**
+ * The provider loaders — gated on consent, at RUNTIME
+ * ([#383](https://github.com/Omega-JS-Stack/omega/issues/383)).
+ *
+ * foot.html used to emit the GA4, Meta and TikTok snippets straight into the
+ * page whenever an id was configured, which meant every visitor was counted
+ * before the banner had even finished animating in. The chrome still emits the
+ * IDS (`window.Configuration.analytics`); the scripts themselves are injected
+ * from here, and only for a category the visitor's consent allows:
+ *
+ *   ga4    → `analytics`
+ *   meta   → `marketing`
+ *   tiktok → `marketing`
+ *
+ * Google Consent Mode is wired for the GA4 half: the `consent default` command
+ * is queued into dataLayer BEFORE gtag.js can load (denied-by-default in an
+ * opt-in region, granted in an opt-out one), and every later change pushes a
+ * `consent update`. That is what makes a denied GA4 behave — the tag itself
+ * honors the flags, on top of us not loading it at all.
+ *
+ * Granting a category injects its loader immediately, no reload. REVOKING one
+ * cannot unload a script that is already running — there is no such thing — so
+ * it takes effect on the next page load, while Consent Mode updates now.
+ */
+import omega from '@omega.js/client';
+
+import { createLogger } from '__main_assets__/js/libs/logger.js';
+import { event } from '__main_assets__/js/libs/analytics.js';
+import { getTrackingConsent, onTrackingConsentChange } from '__main_assets__/js/libs/tracking-consent.js';
+
+const logger = createLogger('analytics-loader');
+
+// Which consent category each provider needs.
+const PROVIDER_CATEGORY = {
+  google: 'analytics',
+  meta: 'marketing',
+  tiktok: 'marketing',
+};
+
+const GTAG_SRC = 'https://www.googletagmanager.com/gtag/js';
+const META_SRC = 'https://connect.facebook.net/en_US/fbevents.js';
+const TIKTOK_SRC = 'https://analytics.tiktok.com/i18n/pixel/events.js';
+
+// The TikTok pixel's own deferred-method list (vendor snippet).
+const TIKTOK_METHODS = [
+  'page', 'track', 'identify', 'instances', 'debug', 'on', 'off', 'once',
+  'ready', 'alias', 'group', 'enableCookie', 'disableCookie',
+];
+
+export default function () {
+  const providers = (omega.config.analytics && omega.config.analytics.providers) || {};
+  const ids = {
+    google: idOf(providers.google),
+    meta: idOf(providers.meta),
+    tiktok: idOf(providers.tiktok),
+  };
+
+  // Nothing configured: no queues, no flags, no listener.
+  if (!ids.google && !ids.meta && !ids.tiktok) {
+    logger.log('No analytics provider is configured — nothing to gate');
+    return;
+  }
+
+  const loaded = { google: false, meta: false, tiktok: false };
+
+  // Inject every provider the consent allows and that is not already running.
+  const load = (consent) => {
+    Object.keys(PROVIDER_CATEGORY).forEach((provider) => {
+      if (!ids[provider] || loaded[provider] || !consent[PROVIDER_CATEGORY[provider]]) {
+        return;
+      }
+
+      loaded[provider] = true;
+      LOADERS[provider](ids[provider]);
+    });
+  };
+
+  const consent = getTrackingConsent();
+
+  // Consent Mode's default MUST be queued before gtag.js can read dataLayer,
+  // so it happens here, ahead of any injection. The boot state IS the default —
+  // there is nothing to update yet.
+  if (ids.google) {
+    installGtagQueue();
+    window.gtag('consent', 'default', consentModeFlags(consent));
+    window.gtag('js', new Date());
+  }
+
+  load(consent);
+
+  onTrackingConsentChange((next) => {
+    if (ids.google) {
+      window.gtag('consent', 'update', consentModeFlags(next));
+    }
+
+    load(next);
+  });
+}
+
+/** A provider's configured id, or '' — an empty id is not configured. */
+function idOf(provider) {
+  const id = provider && provider.id;
+  return typeof id === 'string' && id.trim() ? id.trim() : '';
+}
+
+/**
+ * Google Consent Mode flags for one consent record. The ad_* trio rides
+ * `marketing`, analytics_storage rides `analytics`.
+ * @param {object} consent - a consent record (libs/tracking-consent.js)
+ * @returns {object} the gtag consent payload
+ */
+function consentModeFlags(consent) {
+  const ads = consent.marketing ? 'granted' : 'denied';
+
+  return {
+    ad_storage: ads,
+    ad_user_data: ads,
+    ad_personalization: ads,
+    analytics_storage: consent.analytics ? 'granted' : 'denied',
+  };
+}
+
+/**
+ * The dataLayer queue gtag.js drains when (if) it loads. Ours is the standard
+ * snippet's function — a real `arguments` push, not a rest spread, because
+ * Google's tag reads the pushed object's `length`/index shape.
+ */
+function installGtagQueue() {
+  window.dataLayer = window.dataLayer || [];
+
+  if (window.gtag && window.gtag.__omega) {
+    return;
+  }
+
+  function gtag() {
+    window.dataLayer.push(arguments);
+  }
+
+  gtag.__omega = true;
+  window.gtag = gtag;
+}
+
+/** The Meta pixel's queue (vendor snippet), without its script injection. */
+function installMetaQueue() {
+  if (window.fbq && window.fbq.queue) {
+    return;
+  }
+
+  const fbq = function () {
+    fbq.callMethod ? fbq.callMethod.apply(fbq, arguments) : fbq.queue.push(arguments);
+  };
+
+  fbq.push = fbq;
+  fbq.loaded = true;
+  fbq.version = '2.0';
+  fbq.queue = [];
+
+  window.fbq = fbq;
+  window._fbq = window._fbq || fbq;
+}
+
+/**
+ * The TikTok pixel's queue (vendor snippet), without its script injection —
+ * `ttq.load` in the vendor blob both registers the instance AND appends the
+ * script tag; only the registration survives here, so every provider script on
+ * the page goes through the ONE seam (omega.dom().loadScript).
+ */
+function installTikTokQueue() {
+  if (window.ttq && window.ttq.methods) {
+    return;
+  }
+
+  window.TiktokAnalyticsObject = 'ttq';
+  const ttq = window.ttq = [];
+
+  ttq.methods = TIKTOK_METHODS;
+  ttq.setAndDefer = function (target, method) {
+    target[method] = function () {
+      target.push([method].concat(Array.prototype.slice.call(arguments, 0)));
+    };
+  };
+  ttq.methods.forEach((method) => ttq.setAndDefer(ttq, method));
+
+  ttq.instance = function (id) {
+    const instance = (ttq._i && ttq._i[id]) || [];
+    ttq.methods.forEach((method) => ttq.setAndDefer(instance, method));
+    return instance;
+  };
+
+  ttq.load = function (id, options) {
+    ttq._i = ttq._i || {};
+    ttq._i[id] = [];
+    ttq._i[id]._u = TIKTOK_SRC;
+    ttq._t = ttq._t || {};
+    ttq._t[id] = +new Date();
+    ttq._o = ttq._o || {};
+    ttq._o[id] = options || {};
+  };
+}
+
+/**
+ * This pixel's page view, counted through the FACADE
+ * ([#409](https://github.com/Omega-JS-Stack/omega/issues/409)). The raw
+ * `fbq('track', 'PageView')` and `ttq.page()` this file used to fire at init
+ * were the only page-view signal Meta and TikTok ever got, and they walked past
+ * the catalog and the per-event consent gate every other event goes through.
+ *
+ * GA4 is deliberately NOT in the fire: `gtag('config', id)` counts the page view
+ * itself, so a second one here would double-count every page.
+ *
+ * No params: both pixels read the page's own URL and title, exactly as the raw
+ * calls left them to. The catalog's page params are for the runtimes that have
+ * no document to read — desktop and the extension fire the same canonical event
+ * through @omega.js/client.
+ *
+ * @param {string} provider - The CATALOG's provider key for the pixel that just
+ *   initialized ('meta' | 'tiktok'), not this file's loader key — the two agree
+ *   on both marketing providers and disagree on Google ('google' here, `ga4`
+ *   there), and a key the catalog does not know would skip in silence.
+ * @returns {void}
+ */
+function countPageView(provider) {
+  event('page_view', {}, { providers: [provider] });
+}
+
+/** Inject one provider script; a blocked or failed load is never fatal. */
+function inject(provider, src) {
+  omega.dom().loadScript({ src: src })
+    .catch((error) => logger.log(`${provider} did not load (blocked or offline):`, error.message));
+}
+
+const LOADERS = {
+  google: (id) => {
+    // `config` is queued, not called on a loaded library: dataLayer holds it
+    // until gtag.js drains the queue, exactly as the inline snippet did.
+    window.gtag('config', id);
+    inject('google', `${GTAG_SRC}?id=${encodeURIComponent(id)}`);
+  },
+
+  meta: (id) => {
+    installMetaQueue();
+    window.fbq('init', id);
+    countPageView('meta');
+    inject('meta', META_SRC);
+  },
+
+  tiktok: (id) => {
+    installTikTokQueue();
+    window.ttq.load(id);
+    countPageView('tiktok');
+    inject('tiktok', `${TIKTOK_SRC}?sdkid=${encodeURIComponent(id)}&lib=ttq`);
+  },
+};

package/core/js/core/app-shell.js

@@ -0,0 +1,136 @@
+/**
+ * App Shell Module
+ * Drives the .omega-shell mechanics (core/css/shell/_index.scss): desktop
+ * sidebar collapse (persisted) and the mobile drawer (scrim + Escape dismiss).
+ * Controls are declarative — [data-shell-toggle="collapse|drawer"] and
+ * [data-shell-dismiss] anywhere in the page.
+ */
+import omega from '@omega.js/client';
+
+// Constants
+const STORAGE_KEY = 'shell.collapsed';
+
+// Module
+export default () => {
+  const $shell = document.querySelector('[data-omega-shell]');
+
+  // Create app shell API
+  const shellAPI = {
+    /**
+     * Whether the desktop sidebar is collapsed to the icon rail
+     * @returns {boolean}
+     */
+    isCollapsed: () => $shell?.getAttribute('data-shell-collapsed') === 'true',
+
+    /**
+     * Whether the mobile drawer is open
+     * @returns {boolean}
+     */
+    isOpen: () => $shell?.getAttribute('data-shell-open') === 'true',
+
+    /**
+     * Collapse or expand the desktop sidebar (persisted)
+     * @param {boolean} value
+     */
+    setCollapsed: (value) => {
+      if (!$shell) {
+        return;
+      }
+
+      $shell.setAttribute('data-shell-collapsed', value ? 'true' : 'false');
+      omega.storage().set(STORAGE_KEY, !!value);
+      syncControls(shellAPI);
+    },
+
+    /**
+     * Open or close the mobile drawer (not persisted)
+     * @param {boolean} value
+     */
+    setOpen: (value) => {
+      if (!$shell) {
+        return;
+      }
+
+      $shell.setAttribute('data-shell-open', value ? 'true' : 'false');
+      syncControls(shellAPI);
+    },
+
+    /**
+     * Toggle the desktop sidebar collapse state
+     */
+    toggleCollapsed() {
+      this.setCollapsed(!this.isCollapsed());
+    },
+
+    /**
+     * Toggle the mobile drawer
+     */
+    toggleOpen() {
+      this.setOpen(!this.isOpen());
+    },
+  };
+
+  // Register on the omega library — web's bundle entry creates the container before
+  // this runs; vendored surfaces (desktop/extension renderers) call this
+  // module directly with no such entry, so create it if absent (#111)
+  omega._library = omega._library || {};
+  omega._library.appShell = shellAPI;
+
+  // No shell on this page — the API stays registered but inert
+  if (!$shell) {
+    return;
+  }
+
+  // Restore the persisted collapse state
+  if (String(omega.storage().get(STORAGE_KEY)) === 'true') {
+    $shell.setAttribute('data-shell-collapsed', 'true');
+  }
+
+  // Delegated controls
+  document.addEventListener('click', (event) => {
+    const $control = event.target.closest('[data-shell-toggle], [data-shell-dismiss]');
+
+    if (!$control) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if ($control.hasAttribute('data-shell-dismiss')) {
+      shellAPI.setOpen(false);
+      return;
+    }
+
+    if ($control.getAttribute('data-shell-toggle') === 'collapse') {
+      shellAPI.toggleCollapsed();
+    } else {
+      shellAPI.toggleOpen();
+    }
+  });
+
+  // Escape closes the drawer
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && shellAPI.isOpen()) {
+      shellAPI.setOpen(false);
+    }
+  });
+
+  // Reflect the restored state onto the controls
+  syncControls(shellAPI);
+
+  console.log('App shell module loaded');
+};
+
+/**
+ * Sync aria-expanded on every shell control to the current state
+ * @param {object} shellAPI - The shell API
+ */
+const syncControls = (shellAPI) => {
+  document.querySelectorAll('[data-shell-toggle]').forEach(($el) => {
+    const expanded = $el.getAttribute('data-shell-toggle') === 'collapse'
+      ? !shellAPI.isCollapsed()
+      : shellAPI.isOpen();
+
+    $el.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+  });
+};

package/core/js/core/appearance.js

@@ -0,0 +1,195 @@
+/**
+ * Appearance Module
+ * Handles theme appearance switching (dark, light, system)
+ */
+import omega from '@omega.js/client';
+
+// Constants
+const STORAGE_KEY = 'appearance.preference';
+const VALID_VALUES = ['dark', 'light', 'system'];
+
+// Module state
+let mediaQuery = null;
+
+// Module
+export default () => {
+
+  // Create appearance API
+  const appearanceAPI = {
+    /**
+     * Get the current saved preference
+     * @returns {string|null} 'dark', 'light', 'system', or null if not set
+     */
+    get: () => omega.storage().get(STORAGE_KEY) || null,
+
+    /**
+     * Get the resolved (actual) theme being displayed
+     * @returns {string} 'dark' or 'light'
+     */
+    getResolved: () => document.documentElement.getAttribute('data-bs-theme') || 'dark',
+
+    /**
+     * Set the appearance preference
+     * @param {string} value - 'dark', 'light', or 'system'
+     */
+    set: (value) => {
+      // Validate
+      if (!VALID_VALUES.includes(value)) {
+        console.warn(`Invalid appearance value: ${value}. Must be one of: ${VALID_VALUES.join(', ')}`);
+        return;
+      }
+
+      // Save preference
+      omega.storage().set(STORAGE_KEY, value);
+
+      // Apply theme
+      applyTheme(value);
+
+      // Update UI elements
+      updateUI(value);
+
+      // Setup or teardown system preference listener
+      setupSystemListener(value === 'system');
+    },
+
+    /**
+     * Toggle between dark and light (skips system)
+     */
+    toggle() {
+      const current = this.getResolved();
+      const next = current === 'dark' ? 'light' : 'dark';
+      this.set(next);
+    },
+
+    /**
+     * Cycle through all three modes: dark → light → system → dark
+     */
+    cycle() {
+      const current = this.get() || this.getResolved();
+      const order = ['dark', 'light', 'system'];
+      const currentIndex = order.indexOf(current);
+      const nextIndex = (currentIndex + 1) % order.length;
+      this.set(order[nextIndex]);
+    },
+
+    /**
+     * Clear saved preference (revert to site default)
+     */
+    clear: () => {
+      omega.storage().remove(STORAGE_KEY);
+      updateUI(null);
+      setupSystemListener(false);
+    }
+  };
+
+  // Register on the omega library
+  omega._library.appearance = appearanceAPI;
+
+  // Initialize UI event listeners
+  initializeUI();
+
+  // Setup system listener if current preference is 'system'
+  const currentPreference = appearanceAPI.get();
+  if (currentPreference === 'system') {
+    setupSystemListener(true);
+  }
+
+  // Update UI with current state
+  updateUI(currentPreference);
+
+  console.log('Appearance module loaded');
+};
+
+/**
+ * Apply theme to the document
+ * @param {string} preference - 'dark', 'light', or 'system'
+ */
+const applyTheme = (preference) => {
+  let theme = preference;
+
+  // Resolve system preference
+  if (preference === 'system') {
+    theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  // Apply to document
+  document.documentElement.setAttribute('data-bs-theme', theme);
+};
+
+/**
+ * Setup or teardown the system preference change listener
+ * @param {boolean} enable - Whether to enable the listener
+ */
+const setupSystemListener = (enable) => {
+  // Clean up existing listener
+  if (mediaQuery) {
+    mediaQuery.removeEventListener('change', handleSystemChange);
+    mediaQuery = null;
+  }
+
+  // Setup new listener if needed
+  if (enable) {
+    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', handleSystemChange);
+  }
+};
+
+/**
+ * Handle system preference change
+ * @param {MediaQueryListEvent} event
+ */
+const handleSystemChange = (event) => {
+  const theme = event.matches ? 'dark' : 'light';
+  document.documentElement.setAttribute('data-bs-theme', theme);
+  updateUI('system');
+};
+
+/**
+ * Initialize UI event listeners
+ */
+const initializeUI = () => {
+  // Use event delegation for appearance controls
+  document.addEventListener('click', (event) => {
+    const $target = event.target.closest('[data-appearance-set]');
+
+    if (!$target) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const value = $target.getAttribute('data-appearance-set');
+    omega.library().appearance.set(value);
+  });
+};
+
+/**
+ * Update UI elements to reflect current state
+ * @param {string|null} preference - Current preference
+ */
+const updateUI = (preference) => {
+  const resolved = document.documentElement.getAttribute('data-bs-theme');
+  const displayValue = preference || resolved;
+
+  // Update [data-appearance-current] elements with the preference
+  document.querySelectorAll('[data-appearance-current]').forEach(($el) => {
+    const format = $el.getAttribute('data-appearance-current') || 'preference';
+    $el.textContent = format === 'resolved' ? resolved : displayValue;
+  });
+
+  // Update [data-appearance-icon] elements - show/hide based on current mode
+  // Icons should have data-appearance-icon="light|dark|system" attribute
+  document.querySelectorAll('[data-appearance-icon]').forEach(($el) => {
+    const iconMode = $el.getAttribute('data-appearance-icon');
+    $el.hidden = iconMode !== displayValue;
+  });
+
+  // Update active state on [data-appearance-set] elements
+  document.querySelectorAll('[data-appearance-set]').forEach(($el) => {
+    const value = $el.getAttribute('data-appearance-set');
+    const isActive = value === preference || (!preference && value === resolved);
+
+    $el.classList.toggle('active', isActive);
+    $el.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+  });
+};