@spectrum-web-components/theme - npm Package Compare versions

Comparing version 0.42.2 to 0.42.3

core.dev.js

 "use strict";
 import { Theme } from "./src/Theme.dev.js";
 import coreStyles from "./src/theme.css.js";
-Theme.registerThemeFragment("spectrum", "theme", coreStyles);
+Theme.registerThemeFragment("spectrum", "system", coreStyles);
 //# sourceMappingURL=core.dev.js.map

core.js

@@ -1,2 +0,2 @@
-"use strict";import{Theme as e}from"./src/Theme.js";import m from"./src/theme.css.js";e.registerThemeFragment("spectrum","theme",m);
+"use strict";import{Theme as e}from"./src/Theme.js";import m from"./src/theme.css.js";e.registerThemeFragment("spectrum","system",m);
 //# sourceMappingURL=core.js.map

custom-elements.json

@@ -107,5 +107,5 @@ {
               "kind": "field",
-              "name": "_theme",
+              "name": "_system",
               "type": {
-                "text": "ThemeVariant | ''"
+                "text": "SystemVariant | ''"
               },
@@ -117,11 +117,18 @@ "privacy": "private",
               "kind": "field",
-              "name": "theme",
+              "name": "system",
               "type": {
-                "text": "\"spectrum\" | \"express\" | \"\""
+                "text": "\"spectrum\" | \"express\""
               },
-              "description": "The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n\nA value is requried.",
-              "attribute": "theme"
+              "description": "The Spectrum system that is applied to the content scoped to this `sp-theme` element.\n\nA value is requried.",
+              "attribute": "system"
             },
             {
               "kind": "field",
+              "name": "theme",
+              "type": {
+                "text": "SystemVariant | ''"
+              }
+            },
+            {
+              "kind": "field",
               "name": "_color",
@@ -372,10 +379,2 @@ "type": {
             {
-              "name": "theme",
-              "type": {
-                "text": "\"spectrum\" | \"express\" | \"\""
-              },
-              "description": "The Spectrum theme that is applied to the content scoped to this `sp-theme` element.\n\nA value is requried.",
-              "fieldName": "theme"
-            },
-            {
               "name": "lang",
@@ -395,2 +394,13 @@ "type": {
               "fieldName": "dir"
+            },
+            {
+              "name": "system",
+              "type": {
+                "text": "\"spectrum\" | \"express\""
+              },
+              "description": "The Spectrum system that is applied to the content scoped to this `sp-theme` element.\n\nA value is requried.",
+              "fieldName": "system"
+            },
+            {
+              "name": "theme"
             }
@@ -397,0 +407,0 @@ ],

package.json

 {
     "name": "@spectrum-web-components/theme",
-    "version": "0.42.2",
+    "version": "0.42.3",
     "publishConfig": {
@@ -208,4 +208,4 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.42.2",
-        "@spectrum-web-components/styles": "^0.42.2"
+        "@spectrum-web-components/base": "^0.42.3",
+        "@spectrum-web-components/styles": "^0.42.3"
     },
@@ -231,3 +231,3 @@ "types": "./src/index.d.ts",
     ],
-    "gitHead": "e19af30387032608baaa88c6a17c2ee50103a7c5"
+    "gitHead": "a03edce4f21f232f1705d8eb222e6e5436cad4c3"
 }

src/express/core.dev.js

 "use strict";
 import { Theme } from "../Theme.dev.js";
 import coreStyles from "./theme.css.js";
-Theme.registerThemeFragment("express", "theme", coreStyles);
+Theme.registerThemeFragment("express", "system", coreStyles);
 //# sourceMappingURL=core.dev.js.map

src/express/core.js

@@ -1,2 +0,2 @@
-"use strict";import{Theme as e}from"../Theme.js";import r from"./theme.css.js";e.registerThemeFragment("express","theme",r);
+"use strict";import{Theme as e}from"../Theme.js";import r from"./theme.css.js";e.registerThemeFragment("express","system",r);
 //# sourceMappingURL=core.js.map

src/Theme.d.ts

@@ -14,16 +14,17 @@ import { CSSResultGroup } from '@spectrum-web-components/base';
 }
-declare type ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {
+type ShadowRootWithAdoptedStyleSheets = HTMLElement['shadowRoot'] & {
     adoptedStyleSheets?: CSSStyleSheet[];
 };
-declare type FragmentType = 'color' | 'scale' | 'theme' | 'core' | 'app';
-declare type SettableFragmentTypes = 'color' | 'scale' | 'theme';
-declare type FragmentMap = Map<string, {
+type FragmentType = 'color' | 'scale' | 'system' | 'theme' | 'core' | 'app';
+type SettableFragmentTypes = 'color' | 'scale' | 'system' | 'theme';
+type FragmentMap = Map<string, {
     name: string;
     styles: CSSResultGroup;
 }>;
-export declare type ThemeFragmentMap = Map<FragmentType, FragmentMap>;
-export declare type Color = 'light' | 'lightest' | 'dark' | 'darkest' | 'light-express' | 'lightest-express' | 'dark-express' | 'darkest-express';
-export declare type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';
-export declare type ThemeVariant = 'spectrum' | 'express';
-declare type FragmentName = Color | Scale | ThemeVariant | 'core' | 'app';
+export type ThemeFragmentMap = Map<FragmentType, FragmentMap>;
+export type Color = 'light' | 'lightest' | 'dark' | 'darkest' | 'light-express' | 'lightest-express' | 'dark-express' | 'darkest-express';
+export type Scale = 'medium' | 'large' | 'medium-express' | 'large-express';
+export type ThemeVariant = 'spectrum' | 'express';
+export type SystemVariant = 'spectrum' | 'express';
+type FragmentName = Color | Scale | ThemeVariant | SystemVariant | 'core' | 'app';
 export interface ThemeData {
@@ -33,6 +34,7 @@ color?: Color;
     lang?: string;
-    theme?: ThemeVariant;
+    theme?: SystemVariant;
+    system?: SystemVariant;
 }
-declare type ThemeKindProvider = {
-    [P in SettableFragmentTypes]: ThemeVariant | Color | Scale | '';
+type ThemeKindProvider = {
+    [P in SettableFragmentTypes]: ThemeVariant | SystemVariant | Color | Scale | '';
 };
@@ -66,12 +68,14 @@ export interface ProvideLang {
     shadowRoot: ShadowRootWithAdoptedStyleSheets;
-    private _theme;
+    private _system;
     /**
-     * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.
+     * The Spectrum system that is applied to the content scoped to this `sp-theme` element.
      *
      * A value is requried.
-     * @type {"spectrum" | "express" | ""}
+     * @type {"spectrum" | "express" }
      * @attr
      */
-    get theme(): ThemeVariant | '';
-    set theme(newValue: ThemeVariant | '');
+    get system(): SystemVariant | '';
+    set system(newValue: SystemVariant | '');
+    get theme(): SystemVariant | '';
+    set theme(newValue: SystemVariant | '');
     private _color;
@@ -78,0 +82,0 @@ /**

src/Theme.dev.js

@@ -6,3 +6,3 @@ "use strict";
 import { version } from "@spectrum-web-components/base/src/version.js";
-const ThemeVariantValues = ["spectrum", "express"];
+const SystemVariantValues = ["spectrum", "express"];
 const ScaleValues = ["medium", "large", "medium-express", "large-express"];
@@ -23,3 +23,3 @@ const ColorValues = [
     this._dir = "";
-    this._theme = "spectrum";
+    this._system = "spectrum";
     this._color = "";
@@ -45,3 +45,11 @@ this._scale = "";
   static get observedAttributes() {
-    return ["color", "scale", "theme", "lang", "dir"];
+    return [
+      "color",
+      "scale",
+      "lang",
+      "dir",
+      "system",
+      /* deprecated attributes, but still observing */
+      "theme"
+    ];
   }
@@ -79,2 +87,10 @@ set dir(dir) {
       this.theme = value;
+      window.__swc.warn(
+        this,
+        'property theme in <sp-theme> has been deprecated. Please use system instead like this <sp-theme system="spectrum"/>',
+        "https://opensource.adobe.com/spectrum-web-components/tools/themes/#deprecation",
+        { level: "deprecation" }
+      );
+    } else if (attrName === "system") {
+      this.system = value;
     } else if (attrName === "dir") {
@@ -92,27 +108,43 @@ this.dir = value;
   /**
-   * The Spectrum theme that is applied to the content scoped to this `sp-theme` element.
+   * The Spectrum system that is applied to the content scoped to this `sp-theme` element.
    *
    * A value is requried.
-   * @type {"spectrum" | "express" | ""}
+   * @type {"spectrum" | "express" }
    * @attr
    */
-  get theme() {
-    const themeFragments = _Theme.themeFragmentsByKind.get("theme");
-    const { name } = themeFragments && themeFragments.get("default") || {};
-    return this._theme || name || "";
+  get system() {
+    const systemFragments = _Theme.themeFragmentsByKind.get("system");
+    const { name } = systemFragments && systemFragments.get("default") || {};
+    return this._system || name || "";
   }
-  set theme(newValue) {
-    if (newValue === this._theme)
+  set system(newValue) {
+    if (newValue === this._system)
       return;
-    const theme = !!newValue && ThemeVariantValues.includes(newValue) ? newValue : this.theme;
-    if (theme !== this._theme) {
-      this._theme = theme;
+    const system = !!newValue && SystemVariantValues.includes(newValue) ? newValue : this.system;
+    if (system !== this._system) {
+      this._system = system;
       this.requestUpdate();
     }
-    if (theme) {
-      this.setAttribute("theme", theme);
+    if (system) {
+      this.setAttribute("system", system);
     } else {
-      this.removeAttribute("theme");
+      this.removeAttribute("system");
     }
   }
+  /*
+   * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.
+   */
+  get theme() {
+    if (!this.system) {
+      this.removeAttribute("system");
+    }
+    return this.system;
+  }
+  /*
+   * @deprecated The `theme` attribute has been deprecated in favor of the `system` attribute.
+   */
+  set theme(newValue) {
+    this.system = newValue;
+    this.requestUpdate();
+  }
   /**
@@ -175,3 +207,3 @@ * The Spectrum color stops to apply to content scoped by this `sp-theme` element.
     const getStyle = (fragments, name, kind) => {
-      const currentStyles = kind && kind !== "theme" && this.theme === "express" ? fragments.get(`${name}-express`) : fragments.get(name);
+      const currentStyles = kind && kind !== "theme" && kind !== "system" && this.theme === "express" && this.system === "express" ? fragments.get(`${name}-express`) : fragments.get(name);
       const isAppliedFragment = name === "spectrum" || !kind || this.hasAttribute(kind);
@@ -203,3 +235,3 @@ if (currentStyles && isAppliedFragment) {
         var _a;
-        const themeModifier = this.theme && this.theme !== "spectrum" ? `-${this.theme}` : "";
+        const systemModifier = this.system && this.system !== "spectrum" ? `-${this.system}` : "";
         if (!resolvedValue) {
@@ -214,12 +246,17 @@ issues.push(
         } else if (!((_a = _Theme.themeFragmentsByKind.get(name)) == null ? void 0 : _a.get(
-          resolvedValue + (name === "theme" ? "" : themeModifier)
+          resolvedValue + (name === "system" ? "" : systemModifier)
         ))) {
           issues.push(
-            `You have set "${name}='${resolvedValue}'" but the associated theme fragment has not been loaded.`
+            `You have set "${name}='${resolvedValue}'" but the associated system fragment has not been loaded.`
           );
         }
       };
-      checkForAttribute("theme", this.theme, this._theme);
+      checkForAttribute("system", this.system, this._system);
       checkForAttribute("color", this.color, this._color);
       checkForAttribute("scale", this.scale, this._scale);
+      if (this.hasAttribute("theme")) {
+        issues.push(
+          `The "theme" attribute has been deprecated in favor of "system".`
+        );
+      }
       if (issues.length) {
@@ -268,3 +305,4 @@ window.__swc.warn(
     theme.lang = this.lang || document.documentElement.lang || navigator.language;
-    theme.theme = this.theme || void 0;
+    theme.theme = this.system || void 0;
+    theme.system = this.system || void 0;
   }
@@ -271,0 +309,0 @@ connectedCallback() {

src/Theme.js

@@ -1,2 +0,2 @@
-"use strict";import{supportsAdoptingStyleSheets as h}from"@spectrum-web-components/base";import{version as d}from"@spectrum-web-components/base/src/version.js";const m=["spectrum","express"],c=["medium","large","medium-express","large-express"],p=["light","lightest","dark","darkest","light-express","lightest-express","dark-express","darkest-express"],r=class r extends HTMLElement{constructor(){super();this._dir="";this._theme="spectrum";this._color="";this._scale="";this.trackedChildren=new Set;this._updateRequested=!1;this._contextConsumers=new Map;this.attachShadow({mode:"open"});const e=document.importNode(r.template.content,!0);this.shadowRoot.appendChild(e),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(e){if(e===this.dir)return;this.setAttribute("dir",e),this._dir=e;const t=e==="rtl"?e:"ltr";this.trackedChildren.forEach(s=>{s.setAttribute("dir",t)})}get dir(){return this._dir}attributeChangedCallback(e,t,s){t!==s&&(e==="color"?this.color=s:e==="scale"?this.scale=s:e==="lang"&&s?(this.lang=s,this._provideContext()):e==="theme"?this.theme=s:e==="dir"&&(this.dir=s))}requestUpdate(){window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow?window.ShadyCSS.styleElement(this):this.shouldAdoptStyles()}get theme(){const e=r.themeFragmentsByKind.get("theme"),{name:t}=e&&e.get("default")||{};return this._theme||t||""}set theme(e){if(e===this._theme)return;const t=e&&m.includes(e)?e:this.theme;t!==this._theme&&(this._theme=t,this.requestUpdate()),t?this.setAttribute("theme",t):this.removeAttribute("theme")}get color(){const e=r.themeFragmentsByKind.get("color"),{name:t}=e&&e.get("default")||{};return this._color||t||""}set color(e){if(e===this._color)return;const t=e&&p.includes(e)?e:this.color;t!==this._color&&(this._color=t,this.requestUpdate()),t?this.setAttribute("color",t):this.removeAttribute("color")}get scale(){const e=r.themeFragmentsByKind.get("scale"),{name:t}=e&&e.get("default")||{};return this._scale||t||""}set scale(e){if(e===this._scale)return;const t=e&&c.includes(e)?e:this.scale;t!==this._scale&&(this._scale=t,this.requestUpdate()),t?this.setAttribute("scale",t):this.removeAttribute("scale")}get styles(){const e=[...r.themeFragmentsByKind.keys()],t=(a,i,n)=>{const o=n&&n!=="theme"&&this.theme==="express"?a.get(`${i}-express`):a.get(i),l=i==="spectrum"||!n||this.hasAttribute(n);if(o&&l)return o.styles};return[...e.reduce((a,i)=>{const n=r.themeFragmentsByKind.get(i);let o;if(i==="app"||i==="core")o=t(n,i);else{const{[i]:l}=this;o=t(n,l,i)}return o&&a.push(o),a},[])]}static get template(){return this.templateElement||(this.templateElement=document.createElement("template"),this.templateElement.innerHTML="<slot></slot>"),this.templateElement}__createDeferredPromise(){return new Promise(e=>{this.__resolve=e})}onQueryTheme(e){if(e.defaultPrevented)return;e.preventDefault();const{detail:t}=e;t.color=this.color||void 0,t.scale=this.scale||void 0,t.lang=this.lang||document.documentElement.lang||navigator.language,t.theme=this.theme||void 0}connectedCallback(){if(this.shouldAdoptStyles(),window.ShadyCSS!==void 0&&window.ShadyCSS.styleElement(this),r.instances.add(this),!this.hasAttribute("dir")){let e=this.assignedSlot||this.parentNode;for(;e!==document.documentElement&&!(e instanceof r);)e=e.assignedSlot||e.parentNode||e.host;this.dir=e.dir==="rtl"?e.dir:"ltr"}}disconnectedCallback(){r.instances.delete(this)}startManagingContentDirection(e){this.trackedChildren.add(e)}stopManagingContentDirection(e){this.trackedChildren.delete(e)}async shouldAdoptStyles(){this._updateRequested||(this.updateComplete=this.__createDeferredPromise(),this._updateRequested=!0,this._updateRequested=await!1,this.adoptStyles(),this.__resolve(!0))}adoptStyles(){const e=this.styles;if(window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow&&window.ShadyCSS.ScopingShim){const t=[];for(const[s,a]of r.themeFragmentsByKind)for(const[i,{styles:n}]of a){if(i==="default")continue;let o=n.cssText;r.defaultFragments.has(i)||(o=o.replace(":host",`:host([${s}='${i}'])`)),t.push(o)}window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t,this.localName),window.ShadyCSS.prepareTemplate(r.template,this.localName)}else if(h){const t=[];for(const s of e)t.push(s.styleSheet);this.shadowRoot.adoptedStyleSheets=t}else this.shadowRoot.querySelectorAll("style").forEach(s=>s.remove()),e.forEach(s=>{const a=document.createElement("style");a.textContent=s.cssText,this.shadowRoot.appendChild(a)})}static registerThemeFragment(e,t,s){const a=r.themeFragmentsByKind.get(t)||new Map;a.size===0&&(r.themeFragmentsByKind.set(t,a),a.set("default",{name:e,styles:s}),r.defaultFragments.add(e)),a.set(e,{name:e,styles:s}),r.instances.forEach(i=>i.shouldAdoptStyles())}_provideContext(){this._contextConsumers.forEach(([e,t])=>e(this.lang,t))}_handleContextPresence(e){e.stopPropagation();const t=e.composedPath()[0];if(this._contextConsumers.has(t))return;this._contextConsumers.set(t,[e.detail.callback,()=>this._contextConsumers.delete(t)]);const[s,a]=this._contextConsumers.get(t)||[];s&&a&&s(this.lang||document.documentElement.lang||navigator.language,a)}};r.themeFragmentsByKind=new Map,r.defaultFragments=new Set(["spectrum"]),r.instances=new Set,r.VERSION=d;export let Theme=r;
+"use strict";import{supportsAdoptingStyleSheets as m}from"@spectrum-web-components/base";import{version as d}from"@spectrum-web-components/base/src/version.js";const h=["spectrum","express"],c=["medium","large","medium-express","large-express"],p=["light","lightest","dark","darkest","light-express","lightest-express","dark-express","darkest-express"],r=class r extends HTMLElement{constructor(){super();this._dir="";this._system="spectrum";this._color="";this._scale="";this.trackedChildren=new Set;this._updateRequested=!1;this._contextConsumers=new Map;this.attachShadow({mode:"open"});const e=document.importNode(r.template.content,!0);this.shadowRoot.appendChild(e),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","lang","dir","system","theme"]}set dir(e){if(e===this.dir)return;this.setAttribute("dir",e),this._dir=e;const t=e==="rtl"?e:"ltr";this.trackedChildren.forEach(s=>{s.setAttribute("dir",t)})}get dir(){return this._dir}attributeChangedCallback(e,t,s){t!==s&&(e==="color"?this.color=s:e==="scale"?this.scale=s:e==="lang"&&s?(this.lang=s,this._provideContext()):e==="theme"?(this.theme=s,window.__swc.warn(this,'property theme in <sp-theme> has been deprecated. Please use system instead like this <sp-theme system="spectrum"/>',"https://opensource.adobe.com/spectrum-web-components/tools/themes/#deprecation",{level:"deprecation"})):e==="system"?this.system=s:e==="dir"&&(this.dir=s))}requestUpdate(){window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow?window.ShadyCSS.styleElement(this):this.shouldAdoptStyles()}get system(){const e=r.themeFragmentsByKind.get("system"),{name:t}=e&&e.get("default")||{};return this._system||t||""}set system(e){if(e===this._system)return;const t=e&&h.includes(e)?e:this.system;t!==this._system&&(this._system=t,this.requestUpdate()),t?this.setAttribute("system",t):this.removeAttribute("system")}get theme(){return this.system||this.removeAttribute("system"),this.system}set theme(e){this.system=e,this.requestUpdate()}get color(){const e=r.themeFragmentsByKind.get("color"),{name:t}=e&&e.get("default")||{};return this._color||t||""}set color(e){if(e===this._color)return;const t=e&&p.includes(e)?e:this.color;t!==this._color&&(this._color=t,this.requestUpdate()),t?this.setAttribute("color",t):this.removeAttribute("color")}get scale(){const e=r.themeFragmentsByKind.get("scale"),{name:t}=e&&e.get("default")||{};return this._scale||t||""}set scale(e){if(e===this._scale)return;const t=e&&c.includes(e)?e:this.scale;t!==this._scale&&(this._scale=t,this.requestUpdate()),t?this.setAttribute("scale",t):this.removeAttribute("scale")}get styles(){const e=[...r.themeFragmentsByKind.keys()],t=(a,i,n)=>{const o=n&&n!=="theme"&&n!=="system"&&this.theme==="express"&&this.system==="express"?a.get(`${i}-express`):a.get(i),l=i==="spectrum"||!n||this.hasAttribute(n);if(o&&l)return o.styles};return[...e.reduce((a,i)=>{const n=r.themeFragmentsByKind.get(i);let o;if(i==="app"||i==="core")o=t(n,i);else{const{[i]:l}=this;o=t(n,l,i)}return o&&a.push(o),a},[])]}static get template(){return this.templateElement||(this.templateElement=document.createElement("template"),this.templateElement.innerHTML="<slot></slot>"),this.templateElement}__createDeferredPromise(){return new Promise(e=>{this.__resolve=e})}onQueryTheme(e){if(e.defaultPrevented)return;e.preventDefault();const{detail:t}=e;t.color=this.color||void 0,t.scale=this.scale||void 0,t.lang=this.lang||document.documentElement.lang||navigator.language,t.theme=this.system||void 0,t.system=this.system||void 0}connectedCallback(){if(this.shouldAdoptStyles(),window.ShadyCSS!==void 0&&window.ShadyCSS.styleElement(this),r.instances.add(this),!this.hasAttribute("dir")){let e=this.assignedSlot||this.parentNode;for(;e!==document.documentElement&&!(e instanceof r);)e=e.assignedSlot||e.parentNode||e.host;this.dir=e.dir==="rtl"?e.dir:"ltr"}}disconnectedCallback(){r.instances.delete(this)}startManagingContentDirection(e){this.trackedChildren.add(e)}stopManagingContentDirection(e){this.trackedChildren.delete(e)}async shouldAdoptStyles(){this._updateRequested||(this.updateComplete=this.__createDeferredPromise(),this._updateRequested=!0,this._updateRequested=await!1,this.adoptStyles(),this.__resolve(!0))}adoptStyles(){const e=this.styles;if(window.ShadyCSS!==void 0&&!window.ShadyCSS.nativeShadow&&window.ShadyCSS.ScopingShim){const t=[];for(const[s,a]of r.themeFragmentsByKind)for(const[i,{styles:n}]of a){if(i==="default")continue;let o=n.cssText;r.defaultFragments.has(i)||(o=o.replace(":host",`:host([${s}='${i}'])`)),t.push(o)}window.ShadyCSS.ScopingShim.prepareAdoptedCssText(t,this.localName),window.ShadyCSS.prepareTemplate(r.template,this.localName)}else if(m){const t=[];for(const s of e)t.push(s.styleSheet);this.shadowRoot.adoptedStyleSheets=t}else this.shadowRoot.querySelectorAll("style").forEach(s=>s.remove()),e.forEach(s=>{const a=document.createElement("style");a.textContent=s.cssText,this.shadowRoot.appendChild(a)})}static registerThemeFragment(e,t,s){const a=r.themeFragmentsByKind.get(t)||new Map;a.size===0&&(r.themeFragmentsByKind.set(t,a),a.set("default",{name:e,styles:s}),r.defaultFragments.add(e)),a.set(e,{name:e,styles:s}),r.instances.forEach(i=>i.shouldAdoptStyles())}_provideContext(){this._contextConsumers.forEach(([e,t])=>e(this.lang,t))}_handleContextPresence(e){e.stopPropagation();const t=e.composedPath()[0];if(this._contextConsumers.has(t))return;this._contextConsumers.set(t,[e.detail.callback,()=>this._contextConsumers.delete(t)]);const[s,a]=this._contextConsumers.get(t)||[];s&&a&&s(this.lang||document.documentElement.lang||navigator.language,a)}};r.themeFragmentsByKind=new Map,r.defaultFragments=new Set(["spectrum"]),r.instances=new Set,r.VERSION=d;export let Theme=r;
 //# sourceMappingURL=Theme.js.map

stories/theme.stories.js

@@ -53,3 +53,3 @@ "use strict";
             color="${color}"
-            theme=${window.__swc_hack_knobs__.defaultThemeVariant}
+            system=${window.__swc_hack_knobs__.defaultSystemVariant}
         >
@@ -94,3 +94,4 @@ <div id="example">
         color="dark"
-        theme=${window.__swc_hack_knobs__.defaultThemeVariant}
+        theme=${window.__swc_hack_knobs__.defaultSystemVariant}
+        system=${window.__swc_hack_knobs__.defaultSystemVariant}
     >
@@ -131,3 +132,4 @@ <sp-button>Start</sp-button>
             color="${outer}"
-            theme=${window.__swc_hack_knobs__.defaultThemeVariant}
+            theme=${window.__swc_hack_knobs__.defaultSystemVariant}
+            system=${window.__swc_hack_knobs__.defaultSystemVariant}
         >
@@ -155,3 +157,4 @@ <div id="outer">
                     dir="ltr"
-                    theme=${window.__swc_hack_knobs__.defaultThemeVariant}
+                    theme=${window.__swc_hack_knobs__.defaultSystemVariant}
+                    system=${window.__swc_hack_knobs__.defaultSystemVariant}
                 >
@@ -208,3 +211,4 @@ <div id="inner">
             color="${inner}"
-            theme=${window.__swc_hack_knobs__.defaultThemeVariant}
+            theme=${window.__swc_hack_knobs__.defaultSystemVariant}
+            system=${window.__swc_hack_knobs__.defaultSystemVariant}
         >
@@ -232,3 +236,4 @@ <div id="outer">
                     dir="rtl"
-                    theme=${window.__swc_hack_knobs__.defaultThemeVariant}
+                    theme=${window.__swc_hack_knobs__.defaultSystemVariant}
+                    system=${window.__swc_hack_knobs__.defaultSystemVariant}
                 >
@@ -235,0 +240,0 @@ <div id="inner">

test/theme-devmode.test.js

@@ -7,4 +7,4 @@ "use strict";
   window.__swc.verbose = true;
+  const consoleWarnStub = stub(console, "warn");
   it("warns in Dev Mode when no attributes or fragments", async () => {
-    const consoleWarnStub = stub(console, "warn");
     const el = await fixture(
@@ -31,3 +31,29 @@ html`
   });
+  it("warns in Dev Mode when you pass a theme attribute", async () => {
+    const el = await fixture(
+      html`
+                <sp-theme
+                    theme="classic"
+                    color="dark"
+                    scale="medium"
+                ></sp-theme>
+            `
+    );
+    await elementUpdated(el);
+    expect(consoleWarnStub.called).to.be.true;
+    const spyCall = consoleWarnStub.getCall(0);
+    expect(
+      spyCall.args.at(0).includes("theme delivery"),
+      'confirm "theme-deprecation"-centric message'
+    ).to.be.true;
+    expect(spyCall.args.at(-1), "confirm `data` shape").to.deep.equal({
+      data: {
+        localName: "sp-theme",
+        type: "api",
+        level: "default"
+      }
+    });
+    consoleWarnStub.restore();
+  });
 });
 //# sourceMappingURL=theme-devmode.test.js.map

test/themes.test.js

@@ -7,7 +7,7 @@ "use strict";
 import { css } from "@spectrum-web-components/base";
-describe("Themes", () => {
+describe("Systems", () => {
   it("loads - light", async () => {
     const el = await fixture(
       html`
-                <sp-theme theme="classic" color="light"></sp-theme>
+                <sp-theme system="spectrum" color="light"></sp-theme>
             `
@@ -42,3 +42,3 @@ );
       html`
-                <sp-theme theme="express"></sp-theme>
+                <sp-theme system="express"></sp-theme>
             `
@@ -165,3 +165,45 @@ );
   });
+  it("prefers system over theme", async () => {
+    const el = await fixture(
+      html`
+                <sp-theme system="express"></sp-theme>
+            `
+    );
+    await elementUpdated(el);
+    expect(el.system).to.equal("express");
+    el.setAttribute("theme", "classic");
+    await elementUpdated(el);
+    expect(el.system).to.equal("express");
+    expect(el.theme).to.equal("express");
+  });
 });
+describe("Themes", () => {
+  it("updates system value even if only theme is added to sp-theme", async () => {
+    const el = await fixture(
+      html`
+                <sp-theme theme="express"></sp-theme>
+            `
+    );
+    await elementUpdated(el);
+    expect(el.theme).to.equal("express");
+    el.setAttribute("theme", "spectrum");
+    await elementUpdated(el);
+    expect(el.theme).to.equal("spectrum");
+    expect(el.system).to.equal("spectrum");
+  });
+  it("updates system and theme value iif both are added to sp-theme", async () => {
+    const el = await fixture(
+      html`
+                <sp-theme system="spectrum" theme="spectrum"></sp-theme>
+            `
+    );
+    await elementUpdated(el);
+    expect(el.theme).to.equal("spectrum");
+    expect(el.system).to.equal("spectrum");
+    el.setAttribute("theme", "express");
+    await elementUpdated(el);
+    expect(el.theme).to.equal("express");
+    expect(el.system).to.equal("express");
+  });
+});
 //# sourceMappingURL=themes.test.js.map

No alert changes

Improved metrics

Total package byte prevSize

5864674

increased by0.23%

Lines of code

13125

increased by0.98%

Dependency changes

• Updated@spectrum-web-components/base@^0.42.3

• Updated@spectrum-web-components/styles@^0.42.3