@spectrum-web-components/theme 0.12.0 → 0.13.0

package/src/Theme.js

@@ -1,362 +1,299 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { supportsAdoptingStyleSheets, } from '@spectrum-web-components/base';
-const ThemeVariantValues = ['spectrum', 'express'];
-const ScaleValues = ['medium', 'large', 'medium-express', 'large-express'];
+import {
+  supportsAdoptingStyleSheets
+} from "@spectrum-web-components/base";
+const ThemeVariantValues = ["spectrum", "express"];
+const ScaleValues = ["medium", "large", "medium-express", "large-express"];
 const ColorValues = [
-    'light',
-    'lightest',
-    'dark',
-    'darkest',
-    'light-express',
-    'lightest-express',
-    'dark-express',
-    'darkest-express',
+  "light",
+  "lightest",
+  "dark",
+  "darkest",
+  "light-express",
+  "lightest-express",
+  "dark-express",
+  "darkest-express"
 ];
-/**
- * @element sp-theme
- * @attr {string} [lang=""] - The language of the content scoped to this `sp-theme` element, see: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang" target="_blank">MDN reference</a>.
- *
- * @slot - Content on which to apply the CSS Custom Properties defined by the current theme configuration
- */
-export class Theme extends HTMLElement {
-    constructor() {
-        super();
-        this._dir = '';
-        this._theme = 'spectrum';
-        this._color = '';
-        this._scale = '';
-        this.trackedChildren = new Set();
-        this._updateRequested = false;
-        this._contextConsumers = new Map();
-        this.attachShadow({ mode: 'open' });
-        const node = document.importNode(Theme.template.content, true);
-        this.shadowRoot.appendChild(node);
-        this.shouldAdoptStyles();
-        this.addEventListener('sp-query-theme', this.onQueryTheme);
-        this.addEventListener('sp-language-context', this._handleContextPresence);
-        this.updateComplete = this.__createDeferredPromise();
+const _Theme = class extends HTMLElement {
+  constructor() {
+    super();
+    this._dir = "";
+    this._theme = "spectrum";
+    this._color = "";
+    this._scale = "";
+    this.trackedChildren = /* @__PURE__ */ new Set();
+    this._updateRequested = false;
+    this._contextConsumers = /* @__PURE__ */ new Map();
+    this.attachShadow({ mode: "open" });
+    const node = document.importNode(_Theme.template.content, true);
+    this.shadowRoot.appendChild(node);
+    this.shouldAdoptStyles();
+    this.addEventListener("sp-query-theme", this.onQueryTheme);
+    this.addEventListener("sp-language-context", this._handleContextPresence);
+    this.updateComplete = this.__createDeferredPromise();
+  }
+  static get observedAttributes() {
+    return ["color", "scale", "theme", "lang", "dir"];
+  }
+  set dir(dir) {
+    if (dir === this.dir)
+      return;
+    this.setAttribute("dir", dir);
+    this._dir = dir;
+    const targetDir = dir === "rtl" ? dir : "ltr";
+    this.trackedChildren.forEach((el) => {
+      el.setAttribute("dir", targetDir);
+    });
+  }
+  get dir() {
+    return this._dir;
+  }
+  attributeChangedCallback(attrName, old, value) {
+    if (old === value) {
+      return;
     }
-    static get observedAttributes() {
-        return ['color', 'scale', 'theme', 'lang', 'dir'];
+    if (attrName === "color") {
+      this.color = value;
+    } else if (attrName === "scale") {
+      this.scale = value;
+    } else if (attrName === "lang" && !!value) {
+      this.lang = value;
+      this._provideContext();
+    } else if (attrName === "theme") {
+      this.theme = value;
+    } else if (attrName === "dir") {
+      this.dir = value;
     }
-    set dir(dir) {
-        if (dir === this.dir)
-            return;
-        this.setAttribute('dir', dir);
-        this._dir = dir;
-        const targetDir = dir === 'rtl' ? dir : 'ltr';
-        this.trackedChildren.forEach((el) => {
-            el.setAttribute('dir', targetDir);
-        });
+  }
+  requestUpdate() {
+    if (window.ShadyCSS !== void 0 && !window.ShadyCSS.nativeShadow) {
+      window.ShadyCSS.styleElement(this);
+    } else {
+      this.shouldAdoptStyles();
     }
-    /**
-     * Reading direction of the content scoped to this `sp-theme` element.
-     * @type {"ltr" | "rtl" | ""}
-     * @attr
-     */
-    get dir() {
-        return this._dir;
+  }
+  get theme() {
+    const themeFragments = _Theme.themeFragmentsByKind.get("theme");
+    const { name } = themeFragments && themeFragments.get("default") || {};
+    return this._theme || name || "";
+  }
+  set theme(newValue) {
+    if (newValue === this._theme)
+      return;
+    const theme = !!newValue && ThemeVariantValues.includes(newValue) ? newValue : this.theme;
+    if (theme !== this._theme) {
+      this._theme = theme;
+      this.requestUpdate();
     }
-    attributeChangedCallback(attrName, old, value) {
-        if (old === value) {
-            return;
-        }
-        if (attrName === 'color') {
-            this.color = value;
-        }
-        else if (attrName === 'scale') {
-            this.scale = value;
-        }
-        else if (attrName === 'lang' && !!value) {
-            this.lang = value;
-            this._provideContext();
-        }
-        else if (attrName === 'theme') {
-            this.theme = value;
-        }
-        else if (attrName === 'dir') {
-            this.dir = value;
-        }
+    if (theme) {
+      this.setAttribute("theme", theme);
+    } else {
+      this.removeAttribute("theme");
     }
-    requestUpdate() {
-        if (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow) {
-            window.ShadyCSS.styleElement(this);
-        }
-        else {
-            this.shouldAdoptStyles();
-        }
-    }
-    /**
-     * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.
-     *
-     * A value is requried.
-     * @type {"spectrum" | "express" | ""}
-     * @attr
-     */
-    get theme() {
-        const themeFragments = Theme.themeFragmentsByKind.get('theme');
-        const { name } = (themeFragments && themeFragments.get('default')) || {};
-        return this._theme || name || '';
-    }
-    set theme(newValue) {
-        if (newValue === this._theme)
-            return;
-        const theme = !!newValue && ThemeVariantValues.includes(newValue)
-            ? newValue
-            : this.theme;
-        if (theme !== this._theme) {
-            this._theme = theme;
-            this.requestUpdate();
-        }
-        if (theme) {
-            this.setAttribute('theme', theme);
-        }
-        else {
-            this.removeAttribute('theme');
-        }
-    }
-    /**
-     * The Spectrum color stops to apply to content scoped by this `sp-theme` element.
-     *
-     * A value is requried.
-     * @type {"lightest" | "light" | "dark" | "darkest" | ""}
-     * @attr
-     */
-    get color() {
-        const themeFragments = Theme.themeFragmentsByKind.get('color');
-        const { name } = (themeFragments && themeFragments.get('default')) || {};
-        return this._color || name || '';
-    }
-    set color(newValue) {
-        if (newValue === this._color)
-            return;
-        const color = !!newValue && ColorValues.includes(newValue)
-            ? newValue
-            : this.color;
-        if (color !== this._color) {
-            this._color = color;
-            this.requestUpdate();
-        }
-        if (color) {
-            this.setAttribute('color', color);
-        }
-        else {
-            this.removeAttribute('color');
-        }
+  }
+  get color() {
+    const themeFragments = _Theme.themeFragmentsByKind.get("color");
+    const { name } = themeFragments && themeFragments.get("default") || {};
+    return this._color || name || "";
+  }
+  set color(newValue) {
+    if (newValue === this._color)
+      return;
+    const color = !!newValue && ColorValues.includes(newValue) ? newValue : this.color;
+    if (color !== this._color) {
+      this._color = color;
+      this.requestUpdate();
     }
-    /**
-     * The Spectrum platform scale to apply to content scoped by this `sp-theme` element.
-     *
-     * A value is requried.
-     * @type {"medium" | "large" | ""}
-     * @attr
-     */
-    get scale() {
-        const themeFragments = Theme.themeFragmentsByKind.get('scale');
-        const { name } = (themeFragments && themeFragments.get('default')) || {};
-        return this._scale || name || '';
+    if (color) {
+      this.setAttribute("color", color);
+    } else {
+      this.removeAttribute("color");
     }
-    set scale(newValue) {
-        if (newValue === this._scale)
-            return;
-        const scale = !!newValue && ScaleValues.includes(newValue)
-            ? newValue
-            : this.scale;
-        if (scale !== this._scale) {
-            this._scale = scale;
-            this.requestUpdate();
-        }
-        if (scale) {
-            this.setAttribute('scale', scale);
-        }
-        else {
-            this.removeAttribute('scale');
-        }
+  }
+  get scale() {
+    const themeFragments = _Theme.themeFragmentsByKind.get("scale");
+    const { name } = themeFragments && themeFragments.get("default") || {};
+    return this._scale || name || "";
+  }
+  set scale(newValue) {
+    if (newValue === this._scale)
+      return;
+    const scale = !!newValue && ScaleValues.includes(newValue) ? newValue : this.scale;
+    if (scale !== this._scale) {
+      this._scale = scale;
+      this.requestUpdate();
     }
-    get styles() {
-        const themeKinds = [
-            ...Theme.themeFragmentsByKind.keys(),
-        ];
-        const getStyle = (fragments, name, kind) => {
-            const currentStyles = kind && kind !== 'theme' && this.theme === 'express'
-                ? fragments.get(`${name}-express`)
-                : fragments.get(name);
-            // theme="spectrum" is available by default and doesn't need to be applied.
-            const isAppliedFragment = name === 'spectrum' || !kind || this.hasAttribute(kind);
-            if (currentStyles && isAppliedFragment) {
-                return currentStyles.styles;
-            }
-            return;
-        };
-        const styles = themeKinds.reduce((acc, kind) => {
-            const kindFragments = Theme.themeFragmentsByKind.get(kind);
-            let style;
-            if (kind === 'app' || kind === 'core') {
-                style = getStyle(kindFragments, kind);
-            }
-            else {
-                const { [kind]: name } = this;
-                style = getStyle(kindFragments, name, kind);
-            }
-            if (style) {
-                acc.push(style);
-            }
-            return acc;
-        }, []);
-        return [...styles];
+    if (scale) {
+      this.setAttribute("scale", scale);
+    } else {
+      this.removeAttribute("scale");
     }
-    static get template() {
-        if (!this.templateElement) {
-            this.templateElement = document.createElement('template');
-            this.templateElement.innerHTML = '<slot></slot>';
+  }
+  get styles() {
+    const themeKinds = [
+      ..._Theme.themeFragmentsByKind.keys()
+    ];
+    const getStyle = (fragments, name, kind) => {
+      const currentStyles = kind && kind !== "theme" && this.theme === "express" ? fragments.get(`${name}-express`) : fragments.get(name);
+      const isAppliedFragment = name === "spectrum" || !kind || this.hasAttribute(kind);
+      if (currentStyles && isAppliedFragment) {
+        return currentStyles.styles;
+      }
+      return;
+    };
+    const styles = themeKinds.reduce((acc, kind) => {
+      const kindFragments = _Theme.themeFragmentsByKind.get(kind);
+      let style;
+      if (kind === "app" || kind === "core") {
+        style = getStyle(kindFragments, kind);
+      } else {
+        const { [kind]: name } = this;
+        style = getStyle(kindFragments, name, kind);
+      }
+      if (style) {
+        acc.push(style);
+      }
+      return acc;
+    }, []);
+    if (false) {
+      const issues = [];
+      const checkForAttribute = (name, resolvedValue, actualValue) => {
+        var _a;
+        const themeModifier = this.theme && this.theme !== "spectrum" ? `-${this.theme}` : "";
+        if (!resolvedValue) {
+          issues.push(`You have not explicitly set the "${name}" attribute and there is no default value on which to fallback.`);
+        } else if (!actualValue) {
+          issues.push(`You have not explicitly set the "${name}" attribute, the default value ("${resolvedValue}") is being used as a fallback.`);
+        } else if (!((_a = _Theme.themeFragmentsByKind.get(name)) == null ? void 0 : _a.get(resolvedValue + themeModifier))) {
+          issues.push(`You have set "${name}='${resolvedValue}'" but the associated theme fragment has not been loaded.`);
         }
-        return this.templateElement;
-    }
-    __createDeferredPromise() {
-        return new Promise((resolve) => {
-            this.__resolve = resolve;
+      };
+      checkForAttribute("theme", this.theme, this._theme);
+      checkForAttribute("color", this.color, this._color);
+      checkForAttribute("scale", this.scale, this._scale);
+      if (issues.length) {
+        window.__swc.warn(this, "You are leveraging an <sp-theme> element and the following issues may disrupt your theme delivery:", "https://opensource.adobe.com/spectrum-web-components/components/theme/#example", {
+          issues
         });
+      }
     }
-    onQueryTheme(event) {
-        if (event.defaultPrevented) {
-            return;
-        }
-        event.preventDefault();
-        const { detail: theme } = event;
-        theme.color = this.color || undefined;
-        theme.scale = this.scale || undefined;
-        theme.lang =
-            this.lang || document.documentElement.lang || navigator.language;
-        theme.theme = this.theme || undefined;
+    return [...styles];
+  }
+  static get template() {
+    if (!this.templateElement) {
+      this.templateElement = document.createElement("template");
+      this.templateElement.innerHTML = "<slot></slot>";
     }
-    connectedCallback() {
-        this.shouldAdoptStyles();
-        // Note, first update/render handles styleElement so we only call this if
-        // connected after first update.
-        /* c8 ignore next 3 */
-        if (window.ShadyCSS !== undefined) {
-            window.ShadyCSS.styleElement(this);
-        }
-        // Add `this` to the instances array.
-        Theme.instances.add(this);
-        if (!this.hasAttribute('dir')) {
-            let dirParent = (this.assignedSlot ||
-                this.parentNode);
-            while (dirParent !== document.documentElement &&
-                !(dirParent instanceof Theme)) {
-                dirParent = (dirParent.assignedSlot || // step into the shadow DOM of the parent of a slotted node
-                    dirParent.parentNode || // DOM Element detected
-                    dirParent.host);
-            }
-            this.dir = dirParent.dir === 'rtl' ? dirParent.dir : 'ltr';
-        }
+    return this.templateElement;
+  }
+  __createDeferredPromise() {
+    return new Promise((resolve) => {
+      this.__resolve = resolve;
+    });
+  }
+  onQueryTheme(event) {
+    if (event.defaultPrevented) {
+      return;
     }
-    disconnectedCallback() {
-        // Remove `this` to the instances array.
-        Theme.instances.delete(this);
+    event.preventDefault();
+    const { detail: theme } = event;
+    theme.color = this.color || void 0;
+    theme.scale = this.scale || void 0;
+    theme.lang = this.lang || document.documentElement.lang || navigator.language;
+    theme.theme = this.theme || void 0;
+  }
+  connectedCallback() {
+    this.shouldAdoptStyles();
+    if (window.ShadyCSS !== void 0) {
+      window.ShadyCSS.styleElement(this);
     }
-    startManagingContentDirection(el) {
-        this.trackedChildren.add(el);
+    _Theme.instances.add(this);
+    if (!this.hasAttribute("dir")) {
+      let dirParent = this.assignedSlot || this.parentNode;
+      while (dirParent !== document.documentElement && !(dirParent instanceof _Theme)) {
+        dirParent = dirParent.assignedSlot || dirParent.parentNode || dirParent.host;
+      }
+      this.dir = dirParent.dir === "rtl" ? dirParent.dir : "ltr";
     }
-    stopManagingContentDirection(el) {
-        this.trackedChildren.delete(el);
+  }
+  disconnectedCallback() {
+    _Theme.instances.delete(this);
+  }
+  startManagingContentDirection(el) {
+    this.trackedChildren.add(el);
+  }
+  stopManagingContentDirection(el) {
+    this.trackedChildren.delete(el);
+  }
+  async shouldAdoptStyles() {
+    if (!this._updateRequested) {
+      this.updateComplete = this.__createDeferredPromise();
+      this._updateRequested = true;
+      this._updateRequested = await false;
+      this.adoptStyles();
+      this.__resolve(true);
     }
-    async shouldAdoptStyles() {
-        if (!this._updateRequested) {
-            this.updateComplete = this.__createDeferredPromise();
-            this._updateRequested = true;
-            this._updateRequested = await false;
-            this.adoptStyles();
-            this.__resolve(true);
+  }
+  adoptStyles() {
+    const styles = this.styles;
+    if (window.ShadyCSS !== void 0 && !window.ShadyCSS.nativeShadow && window.ShadyCSS.ScopingShim) {
+      const fragmentCSS = [];
+      for (const [kind, fragments] of _Theme.themeFragmentsByKind) {
+        for (const [name, { styles: styles2 }] of fragments) {
+          if (name === "default")
+            continue;
+          let cssText = styles2.cssText;
+          if (!_Theme.defaultFragments.has(name)) {
+            cssText = cssText.replace(":host", `:host([${kind}='${name}'])`);
+          }
+          fragmentCSS.push(cssText);
         }
+      }
+      window.ShadyCSS.ScopingShim.prepareAdoptedCssText(fragmentCSS, this.localName);
+      window.ShadyCSS.prepareTemplate(_Theme.template, this.localName);
+    } else if (supportsAdoptingStyleSheets) {
+      const styleSheets = [];
+      for (const style of styles) {
+        styleSheets.push(style.styleSheet);
+      }
+      this.shadowRoot.adoptedStyleSheets = styleSheets;
+    } else {
+      const styleNodes = this.shadowRoot.querySelectorAll("style");
+      styleNodes.forEach((element) => element.remove());
+      styles.forEach((s) => {
+        const style = document.createElement("style");
+        style.textContent = s.cssText;
+        this.shadowRoot.appendChild(style);
+      });
     }
-    adoptStyles() {
-        const styles = this.styles; // No test coverage on Edge
-        // There are three separate cases here based on Shadow DOM support.
-        // (1) shadowRoot polyfilled: use ShadyCSS
-        // (2) shadowRoot.adoptedStyleSheets available: use it.
-        // (3) shadowRoot.adoptedStyleSheets polyfilled: append styles after
-        // rendering
-        /* c8 ignore next */ if (window.ShadyCSS !== undefined &&
-            !window.ShadyCSS.nativeShadow &&
-            window.ShadyCSS.ScopingShim) {
-            // For browsers using the shim, there seems to be one set of
-            // processed styles per template, so it is hard to nest styles. So,
-            // for those, we load in all style fragments and then switch using a
-            // host selector (e.g. :host([color='dark']))
-            const fragmentCSS = [];
-            for (const [kind, fragments] of Theme.themeFragmentsByKind) {
-                for (const [name, { styles }] of fragments) {
-                    if (name === 'default')
-                        continue;
-                    let cssText = styles.cssText;
-                    if (!Theme.defaultFragments.has(name)) {
-                        cssText = cssText.replace(':host', `:host([${kind}='${name}'])`);
-                    }
-                    fragmentCSS.push(cssText);
-                }
-            }
-            window.ShadyCSS.ScopingShim.prepareAdoptedCssText(fragmentCSS, this.localName);
-            window.ShadyCSS.prepareTemplate(Theme.template, this.localName);
-        }
-        else if (supportsAdoptingStyleSheets) {
-            const styleSheets = [];
-            for (const style of styles) {
-                styleSheets.push(style.styleSheet);
-            }
-            this.shadowRoot.adoptedStyleSheets = styleSheets;
-        }
-        else {
-            const styleNodes = this.shadowRoot.querySelectorAll('style');
-            styleNodes.forEach((element) => element.remove());
-            styles.forEach((s) => {
-                const style = document.createElement('style');
-                style.textContent = s.cssText;
-                this.shadowRoot.appendChild(style);
-            });
-        }
-    }
-    static registerThemeFragment(name, kind, styles) {
-        const fragmentMap = Theme.themeFragmentsByKind.get(kind) || new Map();
-        if (fragmentMap.size === 0) {
-            Theme.themeFragmentsByKind.set(kind, fragmentMap);
-            // we're adding our first fragment for this kind, set as default
-            fragmentMap.set('default', { name, styles });
-            Theme.defaultFragments.add(name);
-        }
-        fragmentMap.set(name, { name, styles });
-        Theme.instances.forEach((instance) => instance.shouldAdoptStyles());
-    }
-    _provideContext() {
-        this._contextConsumers.forEach((consume) => consume(this.lang));
+  }
+  static registerThemeFragment(name, kind, styles) {
+    const fragmentMap = _Theme.themeFragmentsByKind.get(kind) || /* @__PURE__ */ new Map();
+    if (fragmentMap.size === 0) {
+      _Theme.themeFragmentsByKind.set(kind, fragmentMap);
+      fragmentMap.set("default", { name, styles });
+      _Theme.defaultFragments.add(name);
     }
-    _handleContextPresence(event) {
-        const target = event.composedPath()[0];
-        if (this._contextConsumers.has(target)) {
-            this._contextConsumers.delete(target);
-        }
-        else {
-            this._contextConsumers.set(target, event.detail.callback);
-            const callback = this._contextConsumers.get(target);
-            if (callback) {
-                callback(this.lang ||
-                    document.documentElement.lang ||
-                    navigator.language);
-            }
-        }
+    fragmentMap.set(name, { name, styles });
+    _Theme.instances.forEach((instance) => instance.shouldAdoptStyles());
+  }
+  _provideContext() {
+    this._contextConsumers.forEach((consume) => consume(this.lang));
+  }
+  _handleContextPresence(event) {
+    const target = event.composedPath()[0];
+    if (this._contextConsumers.has(target)) {
+      this._contextConsumers.delete(target);
+    } else {
+      this._contextConsumers.set(target, event.detail.callback);
+      const callback = this._contextConsumers.get(target);
+      if (callback) {
+        callback(this.lang || document.documentElement.lang || navigator.language);
+      }
     }
-}
-Theme.themeFragmentsByKind = new Map();
-Theme.defaultFragments = new Set(['spectrum']);
-Theme.instances = new Set();
-//# sourceMappingURL=Theme.js.map
+  }
+};
+export let Theme = _Theme;
+Theme.themeFragmentsByKind = /* @__PURE__ */ new Map();
+Theme.defaultFragments = /* @__PURE__ */ new Set(["spectrum"]);
+Theme.instances = /* @__PURE__ */ new Set();
+//# sourceMappingURL=Theme.js.map