Update webawesome-element.ts

* fix pass through copying

* prettier

docs/.eleventy.js

@@ -36,10 +36,16 @@ const globalData = {
   },
 };
 
-const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
-const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
-
 export default function (eleventyConfig) {
+  /**
+   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions
+   * will also need to be updated in the Web Awesome App.
+   */
+  const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+
+  const baseDir = process.env.BASE_DIR || 'docs';
+  const passThrough = [...passThroughExtensions.map(ext => path.join(baseDir, '**/*.' + ext))];
+
   /**
    * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
    */

docs/_layouts/palette.njk

@@ -30,12 +30,21 @@
 
   {% include 'breadcrumbs.njk' %}
 
-  <h1 v-if="saved" class="title">
-    {% raw %}{{ saved.title }}{% endraw %}
-    <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
-    <wa-icon-button class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
+  <h1 class="title">
+    <span v-content="title">{{ title }}</span>
+    <template v-if="saved || tweaked">
+      <wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
+      <wa-icon-button v-if="saved" class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
+      <wa-button @click="save()" :disabled="!unsavedChanges"
+        :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
+        <span slot="prefix" class="icon-modifier">
+          <wa-icon name="sidebar" variant="regular"></wa-icon>
+          <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
+        </span>
+        <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
+      </wa-button>
+    </template>
   </h1>
-  <h1 v-if="!saved" class="title">{{ title }}</h1>
 
   <div class="block-info">
     <code class="class">.wa-palette-{{ paletteId }}</code>
@@ -59,7 +68,7 @@
   <wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
    This palette has been tweaked.
    <div class="wa-cluster wa-gap-xs">
-    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
+    <wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)" v-content="tweakHumanReadable"></wa-tag>
    </div>
 
   <wa-button @click="reset()" appearance="outlined" variant="danger">
@@ -68,13 +77,6 @@
     </span>
     Reset
   </wa-button>
-  <wa-button v-if="!saved" @click="save" variant="success">
-    <span slot="prefix" class="icon-modifier">
-      <wa-icon name="sidebar" variant="regular"></wa-icon>
-      <wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
-    </span>
-    Save
-  </wa-button>
 </wa-callout>
 
 <table class="colors main wa-palette-{{ paletteId }}">

docs/assets/scripts/my.js

@@ -0,0 +1,167 @@
+const my = (globalThis.my = new EventTarget());
+export default my;
+
+class PersistedArray extends Array {
+  constructor(key) {
+    super();
+    this.key = key;
+
+    if (this.key) {
+      this.fromLocalStorage();
+    }
+
+    // Items were updated in another tab
+    addEventListener('storage', event => {
+      if (event.key === this.key || !event.key) {
+        this.fromLocalStorage();
+      }
+    });
+  }
+
+  /**
+   * Update data from local storage
+   */
+  fromLocalStorage() {
+    // First, empty the array
+    this.splice(0, this.length);
+
+    // Then, fill it with the data from local storage
+    let saved = localStorage[this.key] ? JSON.parse(localStorage[this.key]) : null;
+
+    if (saved) {
+      this.push(...saved);
+    }
+  }
+
+  /**
+   * Write data to local storage
+   */
+  toLocalStorage() {
+    if (this.length > 0) {
+      localStorage[this.key] = JSON.stringify(this);
+    } else {
+      delete localStorage[this.key];
+    }
+  }
+}
+
+class SavedEntities extends EventTarget {
+  constructor({ key, type, url }) {
+    super();
+    this.key = key;
+    this.type = type;
+    this.url = url ?? type + 's';
+    this.saved = new PersistedArray(key);
+
+    let all = this;
+    this.entityPrototype = {
+      type: this.type,
+      baseUrl: this.baseUrl,
+
+      get url() {
+        return all.getURL(this);
+      },
+
+      get parentUrl() {
+        return all.getParentURL(this);
+      },
+
+      delete() {
+        all.delete(this);
+      },
+    };
+  }
+
+  getUid() {
+    if (this.saved.length === 0) {
+      return 1;
+    }
+
+    let uids = new Set(this.saved.map(p => p.uid));
+
+    // Find first available number
+    for (let i = 1; i <= this.saved.length + 1; i++) {
+      if (!uids.has(i)) {
+        return i;
+      }
+    }
+  }
+
+  get baseUrl() {
+    return `/docs/${this.url}/`;
+  }
+
+  getURL(entity) {
+    return this.getParentURL(entity) + entity.search;
+  }
+
+  getParentURL(entity) {
+    return this.baseUrl + entity.id + '/';
+  }
+
+  getObject(entity) {
+    let ret = Object.create(this.entityPrototype, Object.getOwnPropertyDescriptors(entity));
+    // debugger;
+    return ret;
+  }
+
+  /**
+   * Save an entity, either by updating its existing entry or creating a new one
+   * @param {object} entity
+   */
+  save(entity) {
+    if (!entity.uid) {
+      // First time saving
+      entity.uid = this.getUid();
+    }
+
+    let savedPalettes = this.saved;
+    let existingIndex = entity.uid ? this.saved.findIndex(p => p.uid === entity.uid) : -1;
+    let newIndex = existingIndex > -1 ? existingIndex : savedPalettes.length;
+
+    this.saved.splice(newIndex, 1, entity);
+
+    this.saved.toLocalStorage();
+
+    this.dispatchEvent(new CustomEvent('save', { detail: this.getObject(entity) }));
+
+    return entity;
+  }
+
+  delete(entity) {
+    let count = this.saved.length;
+
+    if (count === 0 || !entity?.uid) {
+      // No stored entities or this entity has not been saved
+      return;
+    }
+
+    // TODO improve UX of this
+    if (!confirm(`Are you sure you want to delete ${this.type} “${entity.title}”?`)) {
+      return;
+    }
+
+    for (let index; (index = this.saved.findIndex(p => p.uid === entity.uid)) > -1; ) {
+      this.saved.splice(index, 1);
+    }
+
+    if (this.saved.length === count) {
+      // Nothing was removed
+      return;
+    }
+
+    this.saved.toLocalStorage();
+
+    this.dispatchEvent(new CustomEvent('delete', { detail: this.getObject(entity) }));
+  }
+
+  dispatchEvent(event) {
+    super.dispatchEvent(event);
+    my.dispatchEvent(event);
+  }
+}
+
+my.palettes = new SavedEntities({
+  key: 'savedPalettes',
+  type: 'palette',
+});

docs/assets/scripts/sidebar-tweaks.js

@@ -1,254 +1,119 @@
-const sidebar = (globalThis.sidebar = {});
+import my from '/assets/scripts/my.js';
 
-sidebar.palettes = {
-  render() {
-    if (this.saved.length === 0) {
-      return;
-    }
+const sidebar = {
+  addChild(a, parentA) {
+    let parentLi = parentA.closest('li');
+    let ul = parentLi.querySelector(':scope > ul');
+    ul ??= parentLi.appendChild(document.createElement('ul'));
+    let li = document.createElement('li');
+    li.append(a);
+    ul.appendChild(li);
 
-    for (let palette of this.saved) {
-      sidebar.palette.render(palette);
-    }
-
-    sidebar.updateCurrent();
-  },
-
-  updateSaved() {
-    this.saved = localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [];
-  },
-
-  save(saved = this.saved) {
-    this.saved = saved ?? [];
-
-    if (saved.length > 0) {
-      localStorage.savedPalettes = JSON.stringify(saved);
-    } else {
-      delete localStorage.savedPalettes;
-    }
-  },
-};
-
-sidebar.palettes.updateSaved();
-addEventListener('storage', event => sidebar.palettes.updateSaved());
-
-sidebar.palette = {
-  getUid() {
-    let savedPalettes = sidebar.palettes.saved;
-    let uids = new Set(savedPalettes.map(p => p.uid));
-
-    if (savedPalettes.length === 0) {
-      return 1;
-    }
-
-    // Find first available number
-    for (let i = 1; i <= savedPalettes.length + 1; i++) {
-      if (!uids.has(i)) {
-        return i;
+    // If we are on the same page, update the current link
+    let url = location.href.replace(/#.+$/, '');
+    if (url.startsWith(a.href)) {
+      // Remove existing current
+      for (let current of document.querySelectorAll('#sidebar a.current')) {
+        current.classList.remove('current');
       }
-    }
-  },
 
-  equals(p1, p2) {
-    if (!p1 || !p2) {
-      return false;
+      a.classList.add('current');
     }
 
-    return p1.id === p2.id && p1.uid === p2.uid;
+    return a;
   },
 
-  delete(palette) {
-    let savedPalettes = sidebar.palettes.saved;
-    let count = savedPalettes.length;
-    if (count === 0) {
+  removeLink(a) {
+    if (!a || !a.isConnected) {
+      // Link doesn't exist or is already removed
       return;
     }
 
-    // TODO improve UX of this
-    if (!confirm(`Are you sure you want to delete palette “${palette.title}”?`)) {
-      return;
+    let li = a?.closest('li');
+    let ul = li?.closest('ul');
+    let parentA = ul?.closest('li')?.querySelector(':scope > a');
+
+    li?.remove();
+    if (ul?.children.length === 0) {
+      ul.remove();
     }
 
-    savedPalettes = savedPalettes.filter(p => !sidebar.palette.equals(palette, p));
-
-    if (savedPalettes.length === count) {
-      // Nothing was removed
-      return;
-    }
-
-    // Update UI
-    let pathname = `/docs/palettes/${palette.id}/`;
-    let url = pathname + palette.search;
-    let uls = new Set();
-
-    for (let a of document.querySelectorAll(`#sidebar a[href="${url}"]`)) {
-      let li = a.closest('li');
-      let ul = li.closest('ul');
-      uls.add(ul);
-      li.remove();
-    }
-
-    // Remove empty lists
-    for (let ul of uls) {
-      if (!ul.children.length) {
-        ul.remove();
-      }
-    }
-
-    sidebar.updateCurrent();
-
-    sidebar.palettes.save(savedPalettes);
-
-    if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
-      paletteApp.postDelete();
+    if (a.classList.contains('current')) {
+      // If the deleted palette was the current one, the current one is now the parent
+      parentA.classList.add('current');
     }
   },
 
-  getSaved(palette, savedPalettes = sidebar.palettes.saved) {
-    return savedPalettes.find(p => sidebar.palette.equals(p, palette));
+  findEntity(entity) {
+    return document.querySelector(`#sidebar a[href^="${entity.baseUrl}"][data-uid="${entity.uid}"]`);
   },
 
-  render(palette) {
-    // Find existing <a>
-    let { title, id, search, uid } = palette;
+  renderEntity(entity) {
+    let { url, parentUrl } = entity;
 
-    for (let a of document.querySelectorAll(`#sidebar a[href^="/docs/palettes/${id}/"][data-uid="${uid}"]`)) {
-      // Palette already in sidebar, just update it
-      a.textContent = palette.title;
-      a.href = `/docs/palettes/${id}/${search}`;
-      return;
-    }
-
-    let pathname = `/docs/palettes/${id}/`;
-    let url = pathname + search;
-    let parentA = document.querySelector(`a[href="${pathname}"]`);
+    // Find parent
+    let parentA = document.querySelector(`#sidebar a[href="${parentUrl}"]`);
     let parentLi = parentA?.closest('li');
-    let a;
 
-    if (parentLi) {
-      a = Object.assign(document.createElement('a'), { href: url, textContent: title });
-      a.dataset.uid = uid;
-      let badges = [...parentLi.querySelectorAll('wa-badge')].map(badge => badge.cloneNode(true));
-      let ul = parentLi.querySelector('ul') ?? parentLi.appendChild(document.createElement('ul'));
-      let li = document.createElement('li');
-      let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
-        name: 'trash',
-        label: 'Delete',
-        className: 'delete',
-      });
-
-      deleteButton.addEventListener('click', () => {
-        let palette = { id, uid, title: a.textContent, search: a.search };
-        sidebar.palette.delete(palette);
-      });
-
-      li.append(a, ' ', ...badges, deleteButton);
-      ul.appendChild(li);
-    }
-  },
-
-  save(palette, saved) {
-    let savedPalettes = sidebar.palettes.saved;
-    let existing = this.getSaved(saved ?? palette, savedPalettes);
-    let oldValues;
-
-    if (existing) {
-      // Rename
-      oldValues = { ...existing };
-      Object.assign(existing, palette);
-    } else {
-      savedPalettes.push(palette);
+    if (!parentLi) {
+      throw new Error(`Cannot find parent url ${parentUrl}`);
     }
 
-    this.render(palette, oldValues);
-    sidebar.updateCurrent();
+    // Find existing
+    let a = this.findEntity(entity);
+    let alreadyExisted = !!a;
 
-    sidebar.palettes.save(savedPalettes);
-  },
-};
+    a ??= document.createElement('a');
 
-sidebar.updateCurrent = function () {
-  // Find the sidebar link with the longest shared prefix with the current URL
-  let pathParts = location.pathname.split('/').filter(Boolean);
-  let prefixes = [];
+    a.textContent = entity.title;
+    a.href = url;
 
-  if (pathParts.length === 1) {
-    // If at /docs/ we just use that, otherwise we want at least two parts (/docs/xxx/)
-    prefixes.push('/' + pathParts[0] + '/');
-  } else {
-    for (let i = 2; i <= pathParts.length; i++) {
-      prefixes.push('/' + pathParts.slice(0, i).join('/') + '/');
-    }
-  }
+    if (!alreadyExisted) {
+      a.dataset.uid = entity.uid;
 
-  // Last prefix includes the search too (if any)
-  if (location.search) {
-    let params = new URLSearchParams(location.search);
-    params.sort();
-    prefixes.push(prefixes.at(-1) + location.search);
-  }
+      a = sidebar.addChild(a, parentA);
 
-  // We want to start from the longest prefix
-  prefixes.reverse();
-  let candidates;
-  let matchingPrefix;
+      // This is mainly to port Pro badges
+      let badges = Array.from(parentLi.querySelectorAll('wa-badge'), badge => badge.cloneNode(true));
+      let append = [...badges];
 
-  for (let prefix of prefixes) {
-    candidates = document.querySelectorAll(`#sidebar a[href^="${prefix}"]`);
-
-    if (candidates.length > 0) {
-      matchingPrefix = prefix;
-      break;
-    }
-  }
-
-  if (!matchingPrefix) {
-    // Abort mission
-    return;
-  }
-
-  if (matchingPrefix === pathParts.at(-1)) {
-    // Full path matches, check search
-    if (location.search) {
-      candidates = [...candidates];
-
-      let searchParams = new URLSearchParams(location.search);
-
-      if (searchParams.has('uid')) {
-        // Only consider candidates with the same uid
-        candidates = candidates.filter(a => {
-          let params = new URLSearchParams(a.search);
-          return params.get('uid') === searchParams.get('uid');
-        });
-      } else {
-        // Sort candidates based on how many params they have in common, in descending order
-        candidates = candidates.sort((a, b) => {
-          return countSharedSearchParams(searchParams, b.search) - countSharedSearchParams(searchParams, a.search);
+      if (entity.delete) {
+        let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
+          name: 'trash',
+          label: 'Delete',
+          className: 'delete',
         });
+        deleteButton.addEventListener('click', () => entity.delete());
+        append.push(deleteButton);
+      }
+
+      if (append.length > 0) {
+        a.closest('li').append(' ', ...append);
       }
     }
-  }
+  },
 
-  if (candidates.length > 0) {
-    for (let current of document.querySelectorAll('#sidebar a.current')) {
-      current.classList.remove('current');
+  render() {
+    for (let type in my) {
+      let controller = my[type];
+
+      if (!controller.saved) {
+        continue;
+      }
+
+      for (let entity of controller.saved) {
+        let object = controller.getObject(entity);
+        this.renderEntity(object);
+      }
     }
-
-    candidates[0].classList.add('current');
-  }
+  },
 };
 
-sidebar.render = function () {
-  this.palettes.render();
-};
+globalThis.sidebar = sidebar;
+
+// Update sidebar when my saved stuff changes
+my.addEventListener('delete', e => sidebar.removeLink(sidebar.findEntity(e.detail)));
+my.addEventListener('save', e => sidebar.renderEntity(e.detail));
 
 sidebar.render();
 window.addEventListener('turbo:render', () => sidebar.render());
-
-function countSharedSearchParams(searchParams, search) {
-  if (!search || search === '?') {
-    return 0;
-  }
-
-  let params = new URLSearchParams(search);
-  return [...searchParams.keys()].filter(k => params.get(k) === searchParams.get(k)).length;
-}

docs/assets/scripts/tweak/permalink.js

@@ -13,56 +13,42 @@ export default class Permalink extends URLSearchParams {
     return Object.fromEntries(this.entries());
   }
 
-  #mappings = new WeakMap();
-
-  mapObject(obj, mapping = {}) {
-    this.#mappings.set(obj, mapping);
-  }
-
-  readFrom(obj) {
-    let mapping = this.#mappings.get(obj) ?? {};
-    let { keyFrom = IDENTITY, valueFrom = IDENTITY } = mapping;
-
-    for (let key in obj) {
-      let value = obj[key];
-      let mappedValue = valueFrom(value);
-      let mappedKey = keyFrom(key);
-      this.set(mappedKey, mappedValue);
-    }
-  }
-
-  writeTo(obj) {
-    let mapping = this.#mappings.get(obj) ?? {};
-    let { keyTo = IDENTITY, valueTo = IDENTITY, canExtend = false } = mapping;
-
-    for (let [key, value] of this) {
-      let mappedKey = keyTo(key);
-      let mappedValue = valueTo(value);
-
-      if (canExtend || mappedKey in obj) {
-        obj[mappedKey] = mappedValue;
-      }
-    }
-  }
-
   set(key, value, defaultValue) {
-    let oldValue = this.get(key);
+    if (equals(value, defaultValue) || equals(value, '')) {
+      value = null;
+    }
 
-    if (!value || value == defaultValue) {
+    value ??= null; // undefined -> null
+
+    let oldValue = Array.isArray(value) ? this.getAll(key) : this.get(key);
+    let changed = !equals(value, oldValue);
+
+    if (!changed) {
+      // Nothing to do here
+      return;
+    }
+
+    if (Array.isArray(value)) {
       super.delete(key);
+      value = value.slice();
 
-      if (oldValue) {
-        this.changed = true;
+      for (let v of value) {
+        if (v || v === 0) {
+          if (typeof v === 'object') {
+            super.append(key, JSON.stringify(v));
+          } else {
+            super.append(key, v);
+          }
+        }
       }
+    } else if (value === null) {
+      super.delete(key);
     } else {
       super.set(key, value);
-
-      if (String(value) !== String(oldValue)) {
-        this.changed = true;
-      }
     }
 
     this.sort();
+    this.changed ||= changed;
   }
 
   /**
@@ -79,3 +65,40 @@ export default class Permalink extends URLSearchParams {
     }
   }
 }
+
+function equals(value, oldValue) {
+  if (Array.isArray(value) || Array.isArray(oldValue)) {
+    value = toArray(value);
+    oldValue = toArray(oldValue);
+
+    if (value.length !== oldValue.length) {
+      return false;
+    }
+
+    return value.every((v, i) => equals(v, oldValue[i]));
+  }
+
+  // (value ?? oldValue ?? true) returns true if they're both empty (null or undefined)
+  [value, oldValue] = [value, oldValue].map(v => (!v && v !== false && v !== 0 ? null : v));
+  return value === oldValue || String(value) === String(oldValue);
+}
+
+/**
+ * Convert a value to an array. `undefined` and `null` values are converted to an empty array.
+ * @param {*} value - The value to convert.
+ * @returns {any[]} The converted array.
+ */
+function toArray(value) {
+  value ??= [];
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  // Don't convert "foo" into ["f", "o", "o"]
+  if (typeof value !== 'string' && typeof value[Symbol.iterator] === 'function') {
+    return Array.from(value);
+  }
+
+  return [value];
+}

docs/assets/scripts/vue/directives/content.js

@@ -0,0 +1,22 @@
+// Like v-text, but doesn't complain if the element has content,
+// making it possible to use in a PE fashion, with the contents being the fallback
+export default function content(el, { value, arg }) {
+  if (!el.dataset.fallback) {
+    // Store the original content as a fallback the first time
+    el.dataset.fallback = el.textContent;
+  }
+
+  if (value === '') {
+    value = el.dataset.fallback;
+  } else {
+    if (arg === 'number') {
+      value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
+    }
+  }
+
+  if (arg === 'html') {
+    el.innerHTML = value;
+  } else {
+    el.textContent = value;
+  }
+}

docs/assets/scripts/vue/mixins/saved.js

@@ -0,0 +1,110 @@
+import my from '/assets/scripts/my.js';
+import Permalink from '/assets/scripts/tweak/permalink.js';
+
+export default {
+  data() {
+    return {
+      uid: undefined,
+      saved: null,
+      unsavedChanges: false,
+      permalink: new Permalink(),
+    };
+  },
+
+  created() {
+    if (this.permalink.has('uid')) {
+      this.uid = Number(this.permalink.get('uid'));
+      this.saved = this.controller.saved.find(p => p.uid === this.uid);
+    }
+
+    this.controller.addEventListener('delete', ({ detail: entity }) => {
+      if (entity.uid === this.saved?.uid) {
+        this.postDelete();
+      }
+    });
+  },
+
+  mounted() {
+    this.$nextTick().then(() => {
+      if (!location.search || this.saved) {
+        this.unsavedChanges = false;
+      }
+    });
+  },
+
+  computed: {
+    controller() {
+      return my[this.collection];
+    },
+
+    title() {
+      if (this.saved) {
+        return this.saved.title;
+      } else if (this.unsavedChanges) {
+        return this.defaultTitle;
+      } else {
+        return this.originalTitle;
+      }
+    },
+  },
+
+  watch: {
+    saved: {
+      deep: true,
+      handler() {
+        this.unsavedChanges = !this.saved;
+      },
+    },
+  },
+
+  methods: {
+    async save({ title } = {}) {
+      let uid = this.uid;
+
+      this.saved ??= { uid: this.uid };
+      this.saved.id = this.id;
+
+      if (title) {
+        // Renaming
+        this.saved.title = title;
+      } else {
+        this.saved.title ??= this.defaultTitle;
+      }
+
+      this.saved.search = location.search;
+
+      this.saved = this.controller.save(this.saved);
+
+      if (uid !== this.saved.uid) {
+        // UID changed (most likely from saving a new entity)
+        this.uid = this.saved.uid;
+        this.permalink.set('uid', this.uid);
+        this.permalink.updateLocation();
+        await this.$nextTick();
+        this.save(); // Save again to update the search param to include the UID
+      }
+
+      this.unsavedChanges = false;
+    },
+
+    rename() {
+      let newTitle = prompt('Title:', this.saved?.title ?? this.defaultTitle);
+
+      if (newTitle && newTitle !== this.saved?.title) {
+        this.save({ title: newTitle });
+      }
+    },
+
+    // Cannot name this delete() because Vue complains
+    deleteSaved() {
+      this.controller.delete(this.saved);
+    },
+
+    postDelete() {
+      this.saved = null;
+      this.permalink.delete('uid');
+      this.uid = undefined;
+      this.permalink.updateLocation();
+    },
+  },
+};

docs/docs/components/icon.md

@@ -24,6 +24,86 @@ Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regu
 <wa-icon family="brands" name="web-awesome"></wa-icon>
 ```
 
+### Setting defaults via CSS
+
+You can use certain CSS custom properties to set icon defaults, not just on the icon itself, but any ancestor.
+This can be useful when you want certain parameters to vary based on context, e.g. icons inside callouts or all icons for a given theme.
+
+:::warning
+These CSS properties are intended to set **defaults**, and thus only make a difference when the corresponding attributes are not set.
+In future versions of Web Awesome, we may change this behavior to allow CSS properties to override attributes if `!important` is used.
+:::
+
+For example, here is how you can use CSS custom properties to set a default icon for each type of callout:
+
+```html {.example}
+<wa-callout>
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  This is a normal callout.
+</wa-callout>
+
+<wa-callout variant="danger">
+  <wa-icon slot="icon" name="dumpster-fire" variant="solid"></wa-icon>
+  This is a callout with an explicit icon, which overrides these defaults.
+</wa-callout>
+
+<wa-callout variant="warning">
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  Here be dragons.
+</wa-callout>
+
+<wa-callout variant="danger">
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  Here be more dragons.
+</wa-callout>
+
+<wa-callout variant="success">
+  <!-- Look ma, no attributes! -->
+  <wa-icon slot="icon"></wa-icon>
+  Success!
+</wa-callout>
+
+<style>
+wa-callout {
+  --wa-icon-variant: regular;
+  --wa-icon-name: info-circle;
+
+  &[variant="warning"] {
+    --wa-icon-name: triangle-exclamation;
+  }
+
+  &[variant="danger"] {
+    --wa-icon-name: circle-exclamation;
+  }
+
+  &[variant="success"] {
+    --wa-icon-name: circle-check;
+  }
+}
+</style>
+```
+
+You can even set icons dynamically, as a response to user interaction or media queries.
+For example, here's how we can change the icon on hover:
+
+```html {.example}
+<wa-button class="github" href="https://github.com/webawesome/webawesome"><wa-icon slot="prefix" fixed-width></wa-icon> GitHub Repo</wa-button>
+<style>
+.github {
+  --wa-icon-name: github;
+  --wa-icon-family: brands;
+
+  &:hover {
+    --wa-icon-name: arrow-up-right-from-square;
+    --wa-icon-family: classic;
+  }
+}
+</style>
+```
+
 ### Colors
 
 Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.

docs/docs/palettes/tweak.js

@@ -6,6 +6,8 @@ import { cssImport, cssLiteral, cssRule } from '../../assets/scripts/tweak/code.
 import { maxGrayChroma, moreHue, selectors, urls } from '../../assets/scripts/tweak/data.js';
 import { subtractAngles } from '../../assets/scripts/tweak/util.js';
 import Prism from '/assets/scripts/prism.js';
+import content from '/assets/scripts/vue/directives/content.js';
+import savedMixin from '/assets/scripts/vue/mixins/saved.js';
 
 await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
 
@@ -38,24 +40,25 @@ for (let palette in allPalettes) {
 const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
 
 let paletteAppSpec = {
+  mixins: [savedMixin],
+
   data() {
     let appRoot = document.querySelector('#palette-app');
-    let paletteId = appRoot.dataset.paletteId;
-    let palette = allPalettes[paletteId];
+    let id = appRoot.dataset.paletteId;
+    let palette = allPalettes[id];
 
     return {
-      uid: undefined,
-      paletteId,
-      paletteTitle: palette.title,
+      id,
+      originalTitle: palette.title,
       originalColors: palette.colors,
-      permalink: new Permalink(),
       hueRanges,
       hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
       chromaScale: 1,
       grayChroma: undefined,
       grayColor: undefined,
       tweaking: {},
-      saved: null,
+      type: 'palette',
+      collection: 'palettes',
     };
   },
 
@@ -63,20 +66,16 @@ let paletteAppSpec = {
     // Non-reactive variables to expose
     Object.assign(this, { moreHue });
 
-    // Read URL params and apply them. This facilitates permalinks.
-    this.permalink.mapObject(this.hueShifts, {
-      keyTo: key => key.replace(/-shift$/, ''),
-      keyFrom: key => key + '-shift',
-      valueFrom: value => (!value ? '' : Number(value)),
-      valueTo: value => (!value ? 0 : Number(value)),
-    });
-
     this.grayChroma = this.originalGrayChroma;
     this.grayColor = this.originalGrayColor;
 
     if (location.search) {
-      // Update from URL
-      this.permalink.writeTo(this.hueShifts);
+      // Read URL params and apply them. This facilitates permalinks.
+      for (let hue in this.hueShifts) {
+        if (this.permalink.has(hue + '-shift')) {
+          this.hueShifts[hue] = Number(this.permalink.get(hue + '-shift'));
+        }
+      }
 
       for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
         if (this.permalink.has(param)) {
@@ -91,12 +90,6 @@ let paletteAppSpec = {
           this[prop] = value;
         }
       }
-
-      if (this.permalink.has('uid')) {
-        this.uid = Number(this.permalink.get('uid'));
-      }
-
-      this.saved = sidebar.palette.getSaved(this.getPalette());
     }
   },
 
@@ -107,6 +100,11 @@ let paletteAppSpec = {
   },
 
   computed: {
+    /** Default palette title for saving */
+    defaultTitle() {
+      return this.originalTitle + ' (tweaked)';
+    },
+
     tweaks() {
       return {
         hueShifts: this.hueShifts,
@@ -123,7 +121,7 @@ let paletteAppSpec = {
     code() {
       let ret = {};
       for (let language of ['html', 'css']) {
-        let code = getPaletteCode(this.paletteId, this.colors, this.tweaked, { language, cdnUrl });
+        let code = getPaletteCode(this.id, this.colors, this.tweaked, { language, cdnUrl });
         ret[language] = {
           raw: code,
           highlighted: Prism.highlight(code, Prism.languages[language], language),
@@ -284,7 +282,9 @@ let paletteAppSpec = {
     hueShifts: {
       deep: true,
       handler() {
-        this.permalink.readFrom(this.hueShifts);
+        for (let hue in this.hueShifts) {
+          this.permalink.set(hue + '-shift', this.hueShifts[hue], 0);
+        }
       },
     },
 
@@ -308,69 +308,12 @@ let paletteAppSpec = {
         // Update page URL
         this.permalink.updateLocation();
 
-        if (this.saved) {
-          this.save({ silent: true });
-        }
+        this.unsavedChanges = true;
       },
     },
   },
 
   methods: {
-    getPalette() {
-      return { id: this.paletteId, uid: this.uid, search: location.search };
-    },
-
-    save({ silent } = {}) {
-      let title = silent
-        ? (this.saved?.title ?? this.paletteTitle)
-        : prompt('Palette title:', `${this.paletteTitle} (tweaked)`);
-
-      if (!title) {
-        return;
-      }
-
-      let uid = this.uid;
-
-      if (!uid) {
-        // First time saving
-        this.uid = uid = sidebar.palette.getUid();
-
-        this.permalink.set('uid', uid);
-        this.permalink.updateLocation();
-      }
-
-      let palette = { ...this.getPalette(), uid, title };
-
-      sidebar.palette.save(palette, this.saved);
-      this.saved = palette;
-    },
-
-    rename() {
-      if (!this.saved) {
-        return;
-      }
-
-      let newTitle = prompt('New title:', this.saved.title);
-
-      if (!newTitle) {
-        return;
-      }
-
-      this.saved.title = newTitle;
-      sidebar.palette.save(this.saved);
-    },
-
-    deleteSaved() {
-      sidebar.palette.delete(this.saved);
-    },
-
-    postDelete() {
-      this.saved = null;
-      this.permalink.delete('uid');
-      this.uid = undefined;
-      this.permalink.updateLocation();
-    },
-
     /**
      * Remove a specific tweak or all tweaks
      * @param {string} [param] - The tweak to remove. If not provided, all tweaks are removed.
@@ -399,28 +342,7 @@ let paletteAppSpec = {
   },
 
   directives: {
-    // Like v-text, but doesn't complain if the element has content,
-    // making it possible to use in a PE fashion, with the contents being the fallback
-    content(el, { value, arg }) {
-      if (!el.dataset.fallback) {
-        // Store the original content as a fallback the first time
-        el.dataset.fallback = el.textContent;
-      }
-
-      if (value === '') {
-        value = el.dataset.fallback;
-      } else {
-        if (arg === 'number') {
-          value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
-        }
-      }
-
-      if (arg === 'html') {
-        el.innerHTML = value;
-      } else {
-        el.textContent = value;
-      }
-    },
+    content,
   },
 
   compilerOptions: {

docs/docs/test/benchmark.njk

@@ -0,0 +1,71 @@
+---
+title: CSS Properties Benchmark
+unlisted: true
+wide: true
+---
+
+{% set icons = {
+    check: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>',
+    'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>',
+    'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>',
+    'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>',
+    circle: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>',
+    'eye-dropper': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>',
+    'grip-vertical': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>',
+    indeterminate: '<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>',
+    minus: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>',
+    pause: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>',
+    play: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>',
+    star: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>',
+    user: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>',
+    xmark: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>'
+} %}
+
+<style>
+.icon-tests {
+	font-size: .5rem;
+	line-height: 1;
+}
+
+wa-icon {
+	transition: 1s font-size;
+	&:hover {
+		font-size: 1rem;
+	}
+}
+</style>
+
+{% set repetitions = 200 %}
+
+<h2>Setting everything via attributes</h2>
+
+<div class="icon-tests">
+{% for icon, svg in icons %}
+	{% for i in range(repetitions) %}
+	<wa-icon name="{{ icon }}" variant="solid" family="classic"></wa-icon>
+	{% endfor %}
+{% endfor %}
+</div>
+
+<h2>Setting variant & family via CSS</h2>
+
+<div class="icon-tests" style="--wa-icon-variant: regular; --wa-icon-family: classic">
+{% for icon, svg in icons %}
+	{% for i in range(repetitions) %}
+	<wa-icon name="{{ icon }}"></wa-icon>
+	{% endfor %}
+{% endfor %}
+</div>
+
+<h2>Setting name via CSS</h2>
+
+<div class="icon-tests">
+{% for icon, svg in icons %}
+<span style="--wa-icon-name: {{ icon }}">
+	{% for i in range(repetitions) %}
+	<wa-icon variant="solid" family="classic"></wa-icon>
+	{% endfor %}
+</span>
+{% endfor %}
+</div>
+

docs/docs/themes/remix.js

@@ -54,8 +54,12 @@ function init() {
     urlParams: new Permalink(),
   };
 
-  data.urlParams.mapObject(data.params);
-  data.urlParams.writeTo(data.params);
+  // Apply params from permalink
+  for (let key in data.params) {
+    if (data.urlParams.has(key)) {
+      data.params[key] = data.urlParams.get(key);
+    }
+  }
 
   if (computed.isRemixed) {
     // Start with the remixing UI open if the theme has been remixed
@@ -128,7 +132,11 @@ function render(changedAspect) {
     selects[aspect].value = value;
   }
 
-  data.urlParams.readFrom(data.params);
+  for (let key in data.params) {
+    if (data.params[key]) {
+      data.urlParams.set(key, data.params[key]);
+    }
+  }
 
   // Update demo URL
   domChange(() => {

package-lock.json

@@ -15,7 +15,8 @@
         "@shoelace-style/localize": "^3.2.1",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.2.1",
-        "qr-creator": "^1.0.0"
+        "qr-creator": "^1.0.0",
+        "style-observer": "^0.0.7"
       },
       "devDependencies": {
         "@11ty/eleventy": "3.0.0",
@@ -13085,6 +13086,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/style-observer": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/style-observer/-/style-observer-0.0.7.tgz",
+      "integrity": "sha512-t75H3CRy+vd5q3yqyrf/De4tkz33hPQTiCcfh0NTesI5G7kJnZ227LEYTwqjKTtaFOCJvqZcYFHpJlF8bsk3bQ==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

package.json

@@ -73,7 +73,8 @@
     "@shoelace-style/localize": "^3.2.1",
     "composed-offset-position": "^0.0.6",
     "lit": "^3.2.1",
-    "qr-creator": "^1.0.0"
+    "qr-creator": "^1.0.0",
+    "style-observer": "^0.0.7"
   },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0",

src/components/badge/badge.ts

@@ -17,9 +17,6 @@ import styles from './badge.css';
  *
  * @cssproperty --background-color - The badge's background color.
  * @cssproperty --border-color - The color of the badge's border.
- * @cssproperty --border-radius - The radius of the badge's corners.
- * @cssproperty --border-style - The style of the badge's border.
- * @cssproperty --border-width - The width of the badge's border.
  * @cssproperty --text-color - The color of the badge's content.
  */
 @customElement('wa-badge')

src/components/icon/icon.ts

@@ -48,21 +48,21 @@ export default class WaIcon extends WebAwesomeElement {
   @state() private svg: SVGElement | HTMLTemplateResult | null = null;
 
   /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property({ reflect: true }) name?: string;
+  @property({ cssProperty: '--wa-icon-name' }) name?: string;
 
   /**
    * The family of icons to choose from. For Font Awesome Free (default), valid options include `classic` and `brands`.
    * For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, and `brands`. Custom icon
    * libraries may or may not use this property.
    */
-  @property({ reflect: true }) family: string;
+  @property({ cssProperty: '--wa-icon-family' }) family: string;
 
   /**
    * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
    * the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
    * may or may not use this property.
    */
-  @property({ reflect: true }) variant: string;
+  @property({ cssProperty: '--wa-icon-variant' }) variant: string;
 
   /** Draws the icon in a fixed-width both. */
   @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,14 +80,16 @@ export default class WaIcon extends WebAwesomeElement {
   @property() label = '';
 
   /** The name of a registered custom icon library. */
-  @property({ reflect: true }) library = 'default';
+  @property({ cssProperty: '--wa-icon-library', default: 'default' }) library = 'default';
 
   connectedCallback() {
     super.connectedCallback();
+
     watchIcon(this);
   }
 
-  firstUpdated() {
+  firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
     this.initialRender = true;
     this.setIcon();
   }

src/internal/webawesome-element.ts

@@ -1,7 +1,9 @@
 import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
 import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ElementStyleObserver } from 'style-observer';
 import componentStyles from '../styles/shadow/component.css';
+import { getComputedStyle } from './computedStyle.js';
 
 // Augment Lit's module
 declare module 'lit' {
@@ -11,6 +13,11 @@ declare module 'lit' {
      */
     default?: any;
     initial?: any;
+
+    /**
+     * Indicates whether the property should reflect to a CSS custom property.
+     */
+    cssProperty?: string;
   }
 }
 
@@ -72,6 +79,99 @@ export default class WebAwesomeElement extends LitElement {
 
   internals: ElementInternals;
 
+  /** Metadata about CSS-settable props on this element */
+  private cssProps: Record<PropertyKey, { setVia?: 'css' | 'attribute' | 'js'; updating?: boolean }> = {};
+  private computedStyle: CSSStyleDeclaration | null = null;
+  private styleObserver: ElementStyleObserver | null = null;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    // Set the initial computed styles
+    const Self = this.constructor as typeof WebAwesomeElement;
+    let cssProps = Object.keys(Self.cssProps);
+
+    if (cssProps.length > 0) {
+      let properties: string[] = [];
+
+      if (Object.keys(this.cssProps).length === 0) {
+        // First time connected, initialize
+        this.cssProps = Object.fromEntries(
+          cssProps.map(property => {
+            let setVia = this.getSetVia(property);
+            return [property, { setVia }];
+          }),
+        );
+      }
+
+      for (let property in this.cssProps) {
+        let setVia = this.cssProps[property].setVia;
+        if (!setVia || setVia === 'css') {
+          // No attribute set, observe CSS property
+          properties.push(property);
+        }
+      }
+
+      this.handleCSSPropertyChange(properties);
+
+      this.styleObserver ??= new ElementStyleObserver(this, (records: object[]) => {
+        let cssProperties = new Set(records.map((record: { property: string }) => record.property));
+
+        // Map CSS properties to prop names
+        let properties = cssProps.filter(property => {
+          let cssProperty = Self.cssProps[property].cssProperty as string;
+          return cssProperties.has(cssProperty);
+        });
+
+        this.handleCSSPropertyChange(properties);
+      });
+      this.styleObserver.unobserve();
+      this.styleObserver.observe(properties.map(property => Self.cssProps[property].cssProperty as string));
+    }
+  }
+
+  /**
+   * Respond to CSS property changes for CSS properties reflecting props
+   * @param [properties] - Prop names. Defaults to all CSS-reflected props.
+   * @void
+   */
+  handleCSSPropertyChange(properties?: PropertyKey | PropertyKey[]) {
+    const Self = this.constructor as typeof WebAwesomeElement;
+
+    properties ??= Object.keys(Self.cssProps);
+    properties = Array.isArray(properties) ? properties : [properties];
+
+    if (properties.length === 0) {
+      return;
+    }
+
+    this.computedStyle ??= getComputedStyle(this);
+
+    for (let property of properties) {
+      let propOptions = Self.cssProps[property];
+      let cssProperty = propOptions?.cssProperty;
+      let meta = this.cssProps[property];
+
+      if (!cssProperty || (meta.setVia && meta.setVia !== 'css')) {
+        continue;
+      }
+
+      const value = this.computedStyle?.getPropertyValue(cssProperty);
+      // if (property === 'variant' && !value) debugger;
+
+      if (value) {
+        meta.setVia = 'css';
+        meta.updating = true;
+        // @ts-ignore
+        this[property] = value.trim();
+
+        this.updateComplete.then(() => {
+          meta.updating = false;
+        });
+      }
+    }
+  }
+
   attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
     if (!this.#hasRecordedInitialProperties) {
       (this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
@@ -115,6 +215,50 @@ export default class WebAwesomeElement extends LitElement {
     }
   }
 
+  /**
+   * Get how a prop was set
+   * @param property - The property to check
+   */
+  private getSetVia(property: PropertyKey): 'css' | 'js' | 'attribute' | undefined {
+    let Self = this.constructor as typeof WebAwesomeElement;
+    let setVia;
+    let propOptions = Self.cssProps[property];
+    let attribute = typeof propOptions.attribute === 'string' ? propOptions.attribute : (property as string);
+
+    if (propOptions.attribute !== false && this.hasAttribute(attribute)) {
+      setVia = 'attribute';
+    } else {
+      // @ts-ignore
+      let value = this[property as PropertyKey];
+      if (value !== undefined && value !== propOptions.default) {
+        setVia = 'js';
+      }
+    }
+
+    return setVia as 'attribute' | 'js' | 'css' | undefined;
+  }
+
+  protected updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    let Self = this.constructor as typeof WebAwesomeElement;
+    let cssProps = Object.keys(Self.cssProps);
+
+    if (cssProps.length === 0) {
+      return;
+    }
+
+    for (let [property] of changedProperties) {
+      let meta = this.cssProps[property];
+
+      if (meta && typeof property === 'string' && !(meta.setVia === 'css' && meta.updating)) {
+        // A prop is being set via JS or an attribute that was previously set via CSS
+        // and it's not because we're in the middle of an update
+        meta.setVia = this.getSetVia(property);
+      }
+    }
+  }
+
   protected update(changedProperties: PropertyValues<this>): void {
     try {
       super.update(changedProperties);
@@ -230,6 +374,11 @@ export default class WebAwesomeElement extends LitElement {
    */
   static rectProxy: undefined | string;
 
+  /**
+   * Props that can be set via CSS custom properties
+   */
+  static cssProps: Record<PropertyKey, PropertyDeclaration> = {};
+
   static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
     if (options) {
       if (options.initial !== undefined && options.default === undefined) {
@@ -256,8 +405,18 @@ export default class WebAwesomeElement extends LitElement {
 
     super.createProperty(name, options);
 
-    // Wrap the default accessor with logic to return the default value if the value is null
     if (options) {
+      if (options.cssProperty) {
+        // Add to the set of CSS-settable props
+        if (this.cssProps === WebAwesomeElement.cssProps) {
+          // Each class needs its own, otherwise they'd share the same object
+          this.cssProps = {};
+        }
+
+        this.cssProps[name] = options;
+      }
+
+      // Wrap the default accessor with logic to return the default value if the value is null
       if (options.default !== undefined) {
         const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);