@m3e/theme 1.0.0-rc.1

package/dist/index.js

@@ -0,0 +1,3711 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import { LitElement, html, css } from 'lit';
+import { Role, DesignToken } from '@m3e/core';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$2=new WeakMap;let n$2 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$2.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$2.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$2("string"==typeof t?t:t+"",void 0,s),S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$1,getPrototypeOf:n$1}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i(t,s),b={attribute:true,type:String,converter:u,reflect:false,useDefault:false,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n$1(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r$1(t),...o$1(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return  false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return  true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[d("elementProperties")]=new Map,y[d("finalized")]=new Map,p?.({ReactiveElement:y}),(a.reactiveElementVersions??=[]).push("2.1.1");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o={attribute:true,type:String,converter:u,reflect:false,hasChanged:f},r=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),"setter"===n&&((t=Object.create(t)).wrapped=true),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.C(o,void 0,t,e),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// This file is automatically generated. Do not modify it.
+/**
+ * Utility methods for mathematical operations.
+ */
+/**
+ * The signum function.
+ *
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+function signum(num) {
+    if (num < 0) {
+        return -1;
+    }
+    else if (num === 0) {
+        return 0;
+    }
+    else {
+        return 1;
+    }
+}
+/**
+ * The linear interpolation function.
+ *
+ * @return start if amount = 0 and stop if amount = 1
+ */
+function lerp(start, stop, amount) {
+    return (1.0 - amount) * start + amount * stop;
+}
+/**
+ * Clamps an integer between two integers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+function clampInt(min, max, input) {
+    if (input < min) {
+        return min;
+    }
+    else if (input > max) {
+        return max;
+    }
+    return input;
+}
+/**
+ * Clamps an integer between two floating-point numbers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+function clampDouble(min, max, input) {
+    if (input < min) {
+        return min;
+    }
+    else if (input > max) {
+        return max;
+    }
+    return input;
+}
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ *
+ * @return a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+function sanitizeDegreesDouble(degrees) {
+    degrees = degrees % 360.0;
+    if (degrees < 0) {
+        degrees = degrees + 360.0;
+    }
+    return degrees;
+}
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ */
+function matrixMultiply(row, matrix) {
+    const a = row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
+    const b = row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
+    const c = row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
+    return [a, b, c];
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// This file is automatically generated. Do not modify it.
+/**
+ * Color science utilities.
+ *
+ * Utility methods for color science constants and color space
+ * conversions that aren't HCT or CAM16.
+ */
+const SRGB_TO_XYZ = [
+    [0.41233895, 0.35762064, 0.18051042],
+    [0.2126, 0.7152, 0.0722],
+    [0.01932141, 0.11916382, 0.95034478],
+];
+const XYZ_TO_SRGB = [
+    [
+        3.2413774792388685,
+        -1.5376652402851851,
+        -0.49885366846268053,
+    ],
+    [
+        -0.9691452513005321,
+        1.8758853451067872,
+        0.04156585616912061,
+    ],
+    [
+        0.05562093689691305,
+        -0.20395524564742123,
+        1.0571799111220335,
+    ],
+];
+const WHITE_POINT_D65 = [95.047, 100.0, 108.883];
+/**
+ * Converts a color from RGB components to ARGB format.
+ */
+function argbFromRgb(red, green, blue) {
+    return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>>
+        0;
+}
+/**
+ * Converts a color from linear RGB components to ARGB format.
+ */
+function argbFromLinrgb(linrgb) {
+    const r = delinearized(linrgb[0]);
+    const g = delinearized(linrgb[1]);
+    const b = delinearized(linrgb[2]);
+    return argbFromRgb(r, g, b);
+}
+/**
+ * Returns the red component of a color in ARGB format.
+ */
+function redFromArgb(argb) {
+    return argb >> 16 & 255;
+}
+/**
+ * Returns the green component of a color in ARGB format.
+ */
+function greenFromArgb(argb) {
+    return argb >> 8 & 255;
+}
+/**
+ * Returns the blue component of a color in ARGB format.
+ */
+function blueFromArgb(argb) {
+    return argb & 255;
+}
+/**
+ * Converts a color from ARGB to XYZ.
+ */
+function argbFromXyz(x, y, z) {
+    const matrix = XYZ_TO_SRGB;
+    const linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
+    const linearG = matrix[1][0] * x + matrix[1][1] * y + matrix[1][2] * z;
+    const linearB = matrix[2][0] * x + matrix[2][1] * y + matrix[2][2] * z;
+    const r = delinearized(linearR);
+    const g = delinearized(linearG);
+    const b = delinearized(linearB);
+    return argbFromRgb(r, g, b);
+}
+/**
+ * Converts a color from XYZ to ARGB.
+ */
+function xyzFromArgb(argb) {
+    const r = linearized(redFromArgb(argb));
+    const g = linearized(greenFromArgb(argb));
+    const b = linearized(blueFromArgb(argb));
+    return matrixMultiply([r, g, b], SRGB_TO_XYZ);
+}
+/**
+ * Converts an L* value to an ARGB representation.
+ *
+ * @param lstar L* in L*a*b*
+ * @return ARGB representation of grayscale color with lightness
+ * matching L*
+ */
+function argbFromLstar(lstar) {
+    const y = yFromLstar(lstar);
+    const component = delinearized(y);
+    return argbFromRgb(component, component, component);
+}
+/**
+ * Computes the L* value of a color in ARGB representation.
+ *
+ * @param argb ARGB representation of a color
+ * @return L*, from L*a*b*, coordinate of the color
+ */
+function lstarFromArgb(argb) {
+    const y = xyzFromArgb(argb)[1];
+    return 116.0 * labF(y / 100.0) - 16.0;
+}
+/**
+ * Converts an L* value to a Y value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param lstar L* in L*a*b*
+ * @return Y in XYZ
+ */
+function yFromLstar(lstar) {
+    return 100.0 * labInvf((lstar + 16.0) / 116.0);
+}
+/**
+ * Converts a Y value to an L* value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param y Y in XYZ
+ * @return L* in L*a*b*
+ */
+function lstarFromY(y) {
+    return labF(y / 100.0) * 116.0 - 16.0;
+}
+/**
+ * Linearizes an RGB component.
+ *
+ * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
+ * channel
+ * @return 0.0 <= output <= 100.0, color channel converted to
+ * linear RGB space
+ */
+function linearized(rgbComponent) {
+    const normalized = rgbComponent / 255.0;
+    if (normalized <= 0.040449936) {
+        return normalized / 12.92 * 100.0;
+    }
+    else {
+        return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100.0;
+    }
+}
+/**
+ * Delinearizes an RGB component.
+ *
+ * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
+ * linear R/G/B channel
+ * @return 0 <= output <= 255, color channel converted to regular
+ * RGB space
+ */
+function delinearized(rgbComponent) {
+    const normalized = rgbComponent / 100.0;
+    let delinearized = 0.0;
+    if (normalized <= 0.0031308) {
+        delinearized = normalized * 12.92;
+    }
+    else {
+        delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
+    }
+    return clampInt(0, 255, Math.round(delinearized * 255.0));
+}
+/**
+ * Returns the standard white point; white on a sunny day.
+ *
+ * @return The white point
+ */
+function whitePointD65() {
+    return WHITE_POINT_D65;
+}
+function labF(t) {
+    const e = 216.0 / 24389.0;
+    const kappa = 24389.0 / 27.0;
+    if (t > e) {
+        return Math.pow(t, 1.0 / 3.0);
+    }
+    else {
+        return (kappa * t + 16) / 116;
+    }
+}
+function labInvf(ft) {
+    const e = 216.0 / 24389.0;
+    const kappa = 24389.0 / 27.0;
+    const ft3 = ft * ft * ft;
+    if (ft3 > e) {
+        return ft3;
+    }
+    else {
+        return (116 * ft - 16) / kappa;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * In traditional color spaces, a color can be identified solely by the
+ * observer's measurement of the color. Color appearance models such as CAM16
+ * also use information about the environment where the color was
+ * observed, known as the viewing conditions.
+ *
+ * For example, white under the traditional assumption of a midday sun white
+ * point is accurately measured as a slightly chromatic blue by CAM16. (roughly,
+ * hue 203, chroma 3, lightness 100)
+ *
+ * This class caches intermediate values of the CAM16 conversion process that
+ * depend only on viewing conditions, enabling speed ups.
+ */
+class ViewingConditions {
+    /**
+     * Create ViewingConditions from a simple, physically relevant, set of
+     * parameters.
+     *
+     * @param whitePoint White point, measured in the XYZ color space.
+     *     default = D65, or sunny day afternoon
+     * @param adaptingLuminance The luminance of the adapting field. Informally,
+     *     how bright it is in the room where the color is viewed. Can be
+     *     calculated from lux by multiplying lux by 0.0586. default = 11.72,
+     *     or 200 lux.
+     * @param backgroundLstar The lightness of the area surrounding the color.
+     *     measured by L* in L*a*b*. default = 50.0
+     * @param surround A general description of the lighting surrounding the
+     *     color. 0 is pitch dark, like watching a movie in a theater. 1.0 is a
+     *     dimly light room, like watching TV at home at night. 2.0 means there
+     *     is no difference between the lighting on the color and around it.
+     *     default = 2.0
+     * @param discountingIlluminant Whether the eye accounts for the tint of the
+     *     ambient lighting, such as knowing an apple is still red in green light.
+     *     default = false, the eye does not perform this process on
+     *       self-luminous objects like displays.
+     */
+    static make(whitePoint = whitePointD65(), adaptingLuminance = (200.0 / Math.PI) * yFromLstar(50.0) / 100.0, backgroundLstar = 50.0, surround = 2.0, discountingIlluminant = false) {
+        const xyz = whitePoint;
+        const rW = xyz[0] * 0.401288 + xyz[1] * 0.650173 + xyz[2] * -0.051461;
+        const gW = xyz[0] * -0.250268 + xyz[1] * 1.204414 + xyz[2] * 0.045854;
+        const bW = xyz[0] * -2079e-6 + xyz[1] * 0.048952 + xyz[2] * 0.953127;
+        const f = 0.8 + surround / 10.0;
+        const c = f >= 0.9 ? lerp(0.59, 0.69, (f - 0.9) * 10.0) :
+            lerp(0.525, 0.59, (f - 0.8) * 10.0);
+        let d = discountingIlluminant ?
+            1.0 :
+            f * (1.0 - (1.0 / 3.6) * Math.exp((-adaptingLuminance - 42.0) / 92.0));
+        d = d > 1.0 ? 1.0 : d < 0.0 ? 0.0 : d;
+        const nc = f;
+        const rgbD = [
+            d * (100.0 / rW) + 1.0 - d,
+            d * (100.0 / gW) + 1.0 - d,
+            d * (100.0 / bW) + 1.0 - d,
+        ];
+        const k = 1.0 / (5.0 * adaptingLuminance + 1.0);
+        const k4 = k * k * k * k;
+        const k4F = 1.0 - k4;
+        const fl = k4 * adaptingLuminance +
+            0.1 * k4F * k4F * Math.cbrt(5.0 * adaptingLuminance);
+        const n = yFromLstar(backgroundLstar) / whitePoint[1];
+        const z = 1.48 + Math.sqrt(n);
+        const nbb = 0.725 / Math.pow(n, 0.2);
+        const ncb = nbb;
+        const rgbAFactors = [
+            Math.pow((fl * rgbD[0] * rW) / 100.0, 0.42),
+            Math.pow((fl * rgbD[1] * gW) / 100.0, 0.42),
+            Math.pow((fl * rgbD[2] * bW) / 100.0, 0.42),
+        ];
+        const rgbA = [
+            (400.0 * rgbAFactors[0]) / (rgbAFactors[0] + 27.13),
+            (400.0 * rgbAFactors[1]) / (rgbAFactors[1] + 27.13),
+            (400.0 * rgbAFactors[2]) / (rgbAFactors[2] + 27.13),
+        ];
+        const aw = (2.0 * rgbA[0] + rgbA[1] + 0.05 * rgbA[2]) * nbb;
+        return new ViewingConditions(n, aw, nbb, ncb, c, nc, rgbD, fl, Math.pow(fl, 0.25), z);
+    }
+    /**
+     * Parameters are intermediate values of the CAM16 conversion process. Their
+     * names are shorthand for technical color science terminology, this class
+     * would not benefit from documenting them individually. A brief overview
+     * is available in the CAM16 specification, and a complete overview requires
+     * a color science textbook, such as Fairchild's Color Appearance Models.
+     */
+    constructor(n, aw, nbb, ncb, c, nc, rgbD, fl, fLRoot, z) {
+        this.n = n;
+        this.aw = aw;
+        this.nbb = nbb;
+        this.ncb = ncb;
+        this.c = c;
+        this.nc = nc;
+        this.rgbD = rgbD;
+        this.fl = fl;
+        this.fLRoot = fLRoot;
+        this.z = z;
+    }
+}
+/** sRGB-like viewing conditions.  */
+ViewingConditions.DEFAULT = ViewingConditions.make();
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * CAM16, a color appearance model. Colors are not just defined by their hex
+ * code, but rather, a hex code and viewing conditions.
+ *
+ * CAM16 instances also have coordinates in the CAM16-UCS space, called J*, a*,
+ * b*, or jstar, astar, bstar in code. CAM16-UCS is included in the CAM16
+ * specification, and should be used when measuring distances between colors.
+ *
+ * In traditional color spaces, a color can be identified solely by the
+ * observer's measurement of the color. Color appearance models such as CAM16
+ * also use information about the environment where the color was
+ * observed, known as the viewing conditions.
+ *
+ * For example, white under the traditional assumption of a midday sun white
+ * point is accurately measured as a slightly chromatic blue by CAM16. (roughly,
+ * hue 203, chroma 3, lightness 100)
+ */
+class Cam16 {
+    /**
+     * All of the CAM16 dimensions can be calculated from 3 of the dimensions, in
+     * the following combinations:
+     *      -  {j or q} and {c, m, or s} and hue
+     *      - jstar, astar, bstar
+     * Prefer using a static method that constructs from 3 of those dimensions.
+     * This constructor is intended for those methods to use to return all
+     * possible dimensions.
+     *
+     * @param hue
+     * @param chroma informally, colorfulness / color intensity. like saturation
+     *     in HSL, except perceptually accurate.
+     * @param j lightness
+     * @param q brightness; ratio of lightness to white point's lightness
+     * @param m colorfulness
+     * @param s saturation; ratio of chroma to white point's chroma
+     * @param jstar CAM16-UCS J coordinate
+     * @param astar CAM16-UCS a coordinate
+     * @param bstar CAM16-UCS b coordinate
+     */
+    constructor(hue, chroma, j, q, m, s, jstar, astar, bstar) {
+        this.hue = hue;
+        this.chroma = chroma;
+        this.j = j;
+        this.q = q;
+        this.m = m;
+        this.s = s;
+        this.jstar = jstar;
+        this.astar = astar;
+        this.bstar = bstar;
+    }
+    /**
+     * CAM16 instances also have coordinates in the CAM16-UCS space, called J*,
+     * a*, b*, or jstar, astar, bstar in code. CAM16-UCS is included in the CAM16
+     * specification, and is used to measure distances between colors.
+     */
+    distance(other) {
+        const dJ = this.jstar - other.jstar;
+        const dA = this.astar - other.astar;
+        const dB = this.bstar - other.bstar;
+        const dEPrime = Math.sqrt(dJ * dJ + dA * dA + dB * dB);
+        const dE = 1.41 * Math.pow(dEPrime, 0.63);
+        return dE;
+    }
+    /**
+     * @param argb ARGB representation of a color.
+     * @return CAM16 color, assuming the color was viewed in default viewing
+     *     conditions.
+     */
+    static fromInt(argb) {
+        return Cam16.fromIntInViewingConditions(argb, ViewingConditions.DEFAULT);
+    }
+    /**
+     * @param argb ARGB representation of a color.
+     * @param viewingConditions Information about the environment where the color
+     *     was observed.
+     * @return CAM16 color.
+     */
+    static fromIntInViewingConditions(argb, viewingConditions) {
+        const red = (argb & 0x00ff0000) >> 16;
+        const green = (argb & 0x0000ff00) >> 8;
+        const blue = (argb & 0x000000ff);
+        const redL = linearized(red);
+        const greenL = linearized(green);
+        const blueL = linearized(blue);
+        const x = 0.41233895 * redL + 0.35762064 * greenL + 0.18051042 * blueL;
+        const y = 0.2126 * redL + 0.7152 * greenL + 0.0722 * blueL;
+        const z = 0.01932141 * redL + 0.11916382 * greenL + 0.95034478 * blueL;
+        const rC = 0.401288 * x + 0.650173 * y - 0.051461 * z;
+        const gC = -0.250268 * x + 1.204414 * y + 0.045854 * z;
+        const bC = -2079e-6 * x + 0.048952 * y + 0.953127 * z;
+        const rD = viewingConditions.rgbD[0] * rC;
+        const gD = viewingConditions.rgbD[1] * gC;
+        const bD = viewingConditions.rgbD[2] * bC;
+        const rAF = Math.pow((viewingConditions.fl * Math.abs(rD)) / 100.0, 0.42);
+        const gAF = Math.pow((viewingConditions.fl * Math.abs(gD)) / 100.0, 0.42);
+        const bAF = Math.pow((viewingConditions.fl * Math.abs(bD)) / 100.0, 0.42);
+        const rA = (signum(rD) * 400.0 * rAF) / (rAF + 27.13);
+        const gA = (signum(gD) * 400.0 * gAF) / (gAF + 27.13);
+        const bA = (signum(bD) * 400.0 * bAF) / (bAF + 27.13);
+        const a = (11.0 * rA + -12 * gA + bA) / 11.0;
+        const b = (rA + gA - 2.0 * bA) / 9.0;
+        const u = (20.0 * rA + 20.0 * gA + 21.0 * bA) / 20.0;
+        const p2 = (40.0 * rA + 20.0 * gA + bA) / 20.0;
+        const atan2 = Math.atan2(b, a);
+        const atanDegrees = (atan2 * 180.0) / Math.PI;
+        const hue = atanDegrees < 0 ? atanDegrees + 360.0 :
+            atanDegrees >= 360 ? atanDegrees - 360.0 :
+                atanDegrees;
+        const hueRadians = (hue * Math.PI) / 180.0;
+        const ac = p2 * viewingConditions.nbb;
+        const j = 100.0 *
+            Math.pow(ac / viewingConditions.aw, viewingConditions.c * viewingConditions.z);
+        const q = (4.0 / viewingConditions.c) * Math.sqrt(j / 100.0) *
+            (viewingConditions.aw + 4.0) * viewingConditions.fLRoot;
+        const huePrime = hue < 20.14 ? hue + 360 : hue;
+        const eHue = 0.25 * (Math.cos((huePrime * Math.PI) / 180.0 + 2.0) + 3.8);
+        const p1 = (50000.0 / 13.0) * eHue * viewingConditions.nc * viewingConditions.ncb;
+        const t = (p1 * Math.sqrt(a * a + b * b)) / (u + 0.305);
+        const alpha = Math.pow(t, 0.9) *
+            Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73);
+        const c = alpha * Math.sqrt(j / 100.0);
+        const m = c * viewingConditions.fLRoot;
+        const s = 50.0 *
+            Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4.0));
+        const jstar = ((1.0 + 100.0 * 0.007) * j) / (1.0 + 0.007 * j);
+        const mstar = (1.0 / 0.0228) * Math.log(1.0 + 0.0228 * m);
+        const astar = mstar * Math.cos(hueRadians);
+        const bstar = mstar * Math.sin(hueRadians);
+        return new Cam16(hue, c, j, q, m, s, jstar, astar, bstar);
+    }
+    /**
+     * @param j CAM16 lightness
+     * @param c CAM16 chroma
+     * @param h CAM16 hue
+     */
+    static fromJch(j, c, h) {
+        return Cam16.fromJchInViewingConditions(j, c, h, ViewingConditions.DEFAULT);
+    }
+    /**
+     * @param j CAM16 lightness
+     * @param c CAM16 chroma
+     * @param h CAM16 hue
+     * @param viewingConditions Information about the environment where the color
+     *     was observed.
+     */
+    static fromJchInViewingConditions(j, c, h, viewingConditions) {
+        const q = (4.0 / viewingConditions.c) * Math.sqrt(j / 100.0) *
+            (viewingConditions.aw + 4.0) * viewingConditions.fLRoot;
+        const m = c * viewingConditions.fLRoot;
+        const alpha = c / Math.sqrt(j / 100.0);
+        const s = 50.0 *
+            Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4.0));
+        const hueRadians = (h * Math.PI) / 180.0;
+        const jstar = ((1.0 + 100.0 * 0.007) * j) / (1.0 + 0.007 * j);
+        const mstar = (1.0 / 0.0228) * Math.log(1.0 + 0.0228 * m);
+        const astar = mstar * Math.cos(hueRadians);
+        const bstar = mstar * Math.sin(hueRadians);
+        return new Cam16(h, c, j, q, m, s, jstar, astar, bstar);
+    }
+    /**
+     * @param jstar CAM16-UCS lightness.
+     * @param astar CAM16-UCS a dimension. Like a* in L*a*b*, it is a Cartesian
+     *     coordinate on the Y axis.
+     * @param bstar CAM16-UCS b dimension. Like a* in L*a*b*, it is a Cartesian
+     *     coordinate on the X axis.
+     */
+    static fromUcs(jstar, astar, bstar) {
+        return Cam16.fromUcsInViewingConditions(jstar, astar, bstar, ViewingConditions.DEFAULT);
+    }
+    /**
+     * @param jstar CAM16-UCS lightness.
+     * @param astar CAM16-UCS a dimension. Like a* in L*a*b*, it is a Cartesian
+     *     coordinate on the Y axis.
+     * @param bstar CAM16-UCS b dimension. Like a* in L*a*b*, it is a Cartesian
+     *     coordinate on the X axis.
+     * @param viewingConditions Information about the environment where the color
+     *     was observed.
+     */
+    static fromUcsInViewingConditions(jstar, astar, bstar, viewingConditions) {
+        const a = astar;
+        const b = bstar;
+        const m = Math.sqrt(a * a + b * b);
+        const M = (Math.exp(m * 0.0228) - 1.0) / 0.0228;
+        const c = M / viewingConditions.fLRoot;
+        let h = Math.atan2(b, a) * (180.0 / Math.PI);
+        if (h < 0.0) {
+            h += 360.0;
+        }
+        const j = jstar / (1 - (jstar - 100) * 0.007);
+        return Cam16.fromJchInViewingConditions(j, c, h, viewingConditions);
+    }
+    /**
+     *  @return ARGB representation of color, assuming the color was viewed in
+     *     default viewing conditions, which are near-identical to the default
+     *     viewing conditions for sRGB.
+     */
+    toInt() {
+        return this.viewed(ViewingConditions.DEFAULT);
+    }
+    /**
+     * @param viewingConditions Information about the environment where the color
+     *     will be viewed.
+     * @return ARGB representation of color
+     */
+    viewed(viewingConditions) {
+        const alpha = this.chroma === 0.0 || this.j === 0.0 ?
+            0.0 :
+            this.chroma / Math.sqrt(this.j / 100.0);
+        const t = Math.pow(alpha / Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73), 1.0 / 0.9);
+        const hRad = (this.hue * Math.PI) / 180.0;
+        const eHue = 0.25 * (Math.cos(hRad + 2.0) + 3.8);
+        const ac = viewingConditions.aw *
+            Math.pow(this.j / 100.0, 1.0 / viewingConditions.c / viewingConditions.z);
+        const p1 = eHue * (50000.0 / 13.0) * viewingConditions.nc * viewingConditions.ncb;
+        const p2 = ac / viewingConditions.nbb;
+        const hSin = Math.sin(hRad);
+        const hCos = Math.cos(hRad);
+        const gamma = (23.0 * (p2 + 0.305) * t) /
+            (23.0 * p1 + 11.0 * t * hCos + 108.0 * t * hSin);
+        const a = gamma * hCos;
+        const b = gamma * hSin;
+        const rA = (460.0 * p2 + 451.0 * a + 288.0 * b) / 1403.0;
+        const gA = (460.0 * p2 - 891.0 * a - 261.0 * b) / 1403.0;
+        const bA = (460.0 * p2 - 220.0 * a - 6300.0 * b) / 1403.0;
+        const rCBase = Math.max(0, (27.13 * Math.abs(rA)) / (400.0 - Math.abs(rA)));
+        const rC = signum(rA) * (100.0 / viewingConditions.fl) *
+            Math.pow(rCBase, 1.0 / 0.42);
+        const gCBase = Math.max(0, (27.13 * Math.abs(gA)) / (400.0 - Math.abs(gA)));
+        const gC = signum(gA) * (100.0 / viewingConditions.fl) *
+            Math.pow(gCBase, 1.0 / 0.42);
+        const bCBase = Math.max(0, (27.13 * Math.abs(bA)) / (400.0 - Math.abs(bA)));
+        const bC = signum(bA) * (100.0 / viewingConditions.fl) *
+            Math.pow(bCBase, 1.0 / 0.42);
+        const rF = rC / viewingConditions.rgbD[0];
+        const gF = gC / viewingConditions.rgbD[1];
+        const bF = bC / viewingConditions.rgbD[2];
+        const x = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF;
+        const y = 0.38752654 * rF + 0.62144744 * gF - 0.00897398 * bF;
+        const z = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF;
+        const argb = argbFromXyz(x, y, z);
+        return argb;
+    }
+    /// Given color expressed in XYZ and viewed in [viewingConditions], convert to
+    /// CAM16.
+    static fromXyzInViewingConditions(x, y, z, viewingConditions) {
+        // Transform XYZ to 'cone'/'rgb' responses
+        const rC = 0.401288 * x + 0.650173 * y - 0.051461 * z;
+        const gC = -0.250268 * x + 1.204414 * y + 0.045854 * z;
+        const bC = -2079e-6 * x + 0.048952 * y + 0.953127 * z;
+        // Discount illuminant
+        const rD = viewingConditions.rgbD[0] * rC;
+        const gD = viewingConditions.rgbD[1] * gC;
+        const bD = viewingConditions.rgbD[2] * bC;
+        // chromatic adaptation
+        const rAF = Math.pow(viewingConditions.fl * Math.abs(rD) / 100.0, 0.42);
+        const gAF = Math.pow(viewingConditions.fl * Math.abs(gD) / 100.0, 0.42);
+        const bAF = Math.pow(viewingConditions.fl * Math.abs(bD) / 100.0, 0.42);
+        const rA = signum(rD) * 400.0 * rAF / (rAF + 27.13);
+        const gA = signum(gD) * 400.0 * gAF / (gAF + 27.13);
+        const bA = signum(bD) * 400.0 * bAF / (bAF + 27.13);
+        // redness-greenness
+        const a = (11.0 * rA + -12 * gA + bA) / 11.0;
+        // yellowness-blueness
+        const b = (rA + gA - 2.0 * bA) / 9.0;
+        // auxiliary components
+        const u = (20.0 * rA + 20.0 * gA + 21.0 * bA) / 20.0;
+        const p2 = (40.0 * rA + 20.0 * gA + bA) / 20.0;
+        // hue
+        const atan2 = Math.atan2(b, a);
+        const atanDegrees = atan2 * 180.0 / Math.PI;
+        const hue = atanDegrees < 0 ? atanDegrees + 360.0 :
+            atanDegrees >= 360 ? atanDegrees - 360 :
+                atanDegrees;
+        const hueRadians = hue * Math.PI / 180.0;
+        // achromatic response to color
+        const ac = p2 * viewingConditions.nbb;
+        // CAM16 lightness and brightness
+        const J = 100.0 *
+            Math.pow(ac / viewingConditions.aw, viewingConditions.c * viewingConditions.z);
+        const Q = (4.0 / viewingConditions.c) * Math.sqrt(J / 100.0) *
+            (viewingConditions.aw + 4.0) * (viewingConditions.fLRoot);
+        const huePrime = (hue < 20.14) ? hue + 360 : hue;
+        const eHue = (1.0 / 4.0) * (Math.cos(huePrime * Math.PI / 180.0 + 2.0) + 3.8);
+        const p1 = 50000.0 / 13.0 * eHue * viewingConditions.nc * viewingConditions.ncb;
+        const t = p1 * Math.sqrt(a * a + b * b) / (u + 0.305);
+        const alpha = Math.pow(t, 0.9) *
+            Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73);
+        // CAM16 chroma, colorfulness, chroma
+        const C = alpha * Math.sqrt(J / 100.0);
+        const M = C * viewingConditions.fLRoot;
+        const s = 50.0 *
+            Math.sqrt((alpha * viewingConditions.c) / (viewingConditions.aw + 4.0));
+        // CAM16-UCS components
+        const jstar = (1.0 + 100.0 * 0.007) * J / (1.0 + 0.007 * J);
+        const mstar = Math.log(1.0 + 0.0228 * M) / 0.0228;
+        const astar = mstar * Math.cos(hueRadians);
+        const bstar = mstar * Math.sin(hueRadians);
+        return new Cam16(hue, C, J, Q, M, s, jstar, astar, bstar);
+    }
+    /// XYZ representation of CAM16 seen in [viewingConditions].
+    xyzInViewingConditions(viewingConditions) {
+        const alpha = (this.chroma === 0.0 || this.j === 0.0) ?
+            0.0 :
+            this.chroma / Math.sqrt(this.j / 100.0);
+        const t = Math.pow(alpha / Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73), 1.0 / 0.9);
+        const hRad = this.hue * Math.PI / 180.0;
+        const eHue = 0.25 * (Math.cos(hRad + 2.0) + 3.8);
+        const ac = viewingConditions.aw *
+            Math.pow(this.j / 100.0, 1.0 / viewingConditions.c / viewingConditions.z);
+        const p1 = eHue * (50000.0 / 13.0) * viewingConditions.nc * viewingConditions.ncb;
+        const p2 = (ac / viewingConditions.nbb);
+        const hSin = Math.sin(hRad);
+        const hCos = Math.cos(hRad);
+        const gamma = 23.0 * (p2 + 0.305) * t /
+            (23.0 * p1 + 11 * t * hCos + 108.0 * t * hSin);
+        const a = gamma * hCos;
+        const b = gamma * hSin;
+        const rA = (460.0 * p2 + 451.0 * a + 288.0 * b) / 1403.0;
+        const gA = (460.0 * p2 - 891.0 * a - 261.0 * b) / 1403.0;
+        const bA = (460.0 * p2 - 220.0 * a - 6300.0 * b) / 1403.0;
+        const rCBase = Math.max(0, (27.13 * Math.abs(rA)) / (400.0 - Math.abs(rA)));
+        const rC = signum(rA) * (100.0 / viewingConditions.fl) *
+            Math.pow(rCBase, 1.0 / 0.42);
+        const gCBase = Math.max(0, (27.13 * Math.abs(gA)) / (400.0 - Math.abs(gA)));
+        const gC = signum(gA) * (100.0 / viewingConditions.fl) *
+            Math.pow(gCBase, 1.0 / 0.42);
+        const bCBase = Math.max(0, (27.13 * Math.abs(bA)) / (400.0 - Math.abs(bA)));
+        const bC = signum(bA) * (100.0 / viewingConditions.fl) *
+            Math.pow(bCBase, 1.0 / 0.42);
+        const rF = rC / viewingConditions.rgbD[0];
+        const gF = gC / viewingConditions.rgbD[1];
+        const bF = bC / viewingConditions.rgbD[2];
+        const x = 1.86206786 * rF - 1.01125463 * gF + 0.14918677 * bF;
+        const y = 0.38752654 * rF + 0.62144744 * gF - 0.00897398 * bF;
+        const z = -0.0158415 * rF - 0.03412294 * gF + 1.04996444 * bF;
+        return [x, y, z];
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// This file is automatically generated. Do not modify it.
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable:class-as-namespace
+/**
+ * A class that solves the HCT equation.
+ */
+class HctSolver {
+    /**
+     * Sanitizes a small enough angle in radians.
+     *
+     * @param angle An angle in radians; must not deviate too much
+     * from 0.
+     * @return A coterminal angle between 0 and 2pi.
+     */
+    static sanitizeRadians(angle) {
+        return (angle + Math.PI * 8) % (Math.PI * 2);
+    }
+    /**
+     * Delinearizes an RGB component, returning a floating-point
+     * number.
+     *
+     * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
+     * linear R/G/B channel
+     * @return 0.0 <= output <= 255.0, color channel converted to
+     * regular RGB space
+     */
+    static trueDelinearized(rgbComponent) {
+        const normalized = rgbComponent / 100.0;
+        let delinearized = 0.0;
+        if (normalized <= 0.0031308) {
+            delinearized = normalized * 12.92;
+        }
+        else {
+            delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
+        }
+        return delinearized * 255.0;
+    }
+    static chromaticAdaptation(component) {
+        const af = Math.pow(Math.abs(component), 0.42);
+        return signum(component) * 400.0 * af / (af + 27.13);
+    }
+    /**
+     * Returns the hue of a linear RGB color in CAM16.
+     *
+     * @param linrgb The linear RGB coordinates of a color.
+     * @return The hue of the color in CAM16, in radians.
+     */
+    static hueOf(linrgb) {
+        const scaledDiscount = matrixMultiply(linrgb, HctSolver.SCALED_DISCOUNT_FROM_LINRGB);
+        const rA = HctSolver.chromaticAdaptation(scaledDiscount[0]);
+        const gA = HctSolver.chromaticAdaptation(scaledDiscount[1]);
+        const bA = HctSolver.chromaticAdaptation(scaledDiscount[2]);
+        // redness-greenness
+        const a = (11.0 * rA + -12 * gA + bA) / 11.0;
+        // yellowness-blueness
+        const b = (rA + gA - 2.0 * bA) / 9.0;
+        return Math.atan2(b, a);
+    }
+    static areInCyclicOrder(a, b, c) {
+        const deltaAB = HctSolver.sanitizeRadians(b - a);
+        const deltaAC = HctSolver.sanitizeRadians(c - a);
+        return deltaAB < deltaAC;
+    }
+    /**
+     * Solves the lerp equation.
+     *
+     * @param source The starting number.
+     * @param mid The number in the middle.
+     * @param target The ending number.
+     * @return A number t such that lerp(source, target, t) = mid.
+     */
+    static intercept(source, mid, target) {
+        return (mid - source) / (target - source);
+    }
+    static lerpPoint(source, t, target) {
+        return [
+            source[0] + (target[0] - source[0]) * t,
+            source[1] + (target[1] - source[1]) * t,
+            source[2] + (target[2] - source[2]) * t,
+        ];
+    }
+    /**
+     * Intersects a segment with a plane.
+     *
+     * @param source The coordinates of point A.
+     * @param coordinate The R-, G-, or B-coordinate of the plane.
+     * @param target The coordinates of point B.
+     * @param axis The axis the plane is perpendicular with. (0: R, 1:
+     * G, 2: B)
+     * @return The intersection point of the segment AB with the plane
+     * R=coordinate, G=coordinate, or B=coordinate
+     */
+    static setCoordinate(source, coordinate, target, axis) {
+        const t = HctSolver.intercept(source[axis], coordinate, target[axis]);
+        return HctSolver.lerpPoint(source, t, target);
+    }
+    static isBounded(x) {
+        return 0.0 <= x && x <= 100.0;
+    }
+    /**
+     * Returns the nth possible vertex of the polygonal intersection.
+     *
+     * @param y The Y value of the plane.
+     * @param n The zero-based index of the point. 0 <= n <= 11.
+     * @return The nth possible vertex of the polygonal intersection
+     * of the y plane and the RGB cube, in linear RGB coordinates, if
+     * it exists. If this possible vertex lies outside of the cube,
+     * [-1.0, -1.0, -1.0] is returned.
+     */
+    static nthVertex(y, n) {
+        const kR = HctSolver.Y_FROM_LINRGB[0];
+        const kG = HctSolver.Y_FROM_LINRGB[1];
+        const kB = HctSolver.Y_FROM_LINRGB[2];
+        const coordA = n % 4 <= 1 ? 0.0 : 100.0;
+        const coordB = n % 2 === 0 ? 0.0 : 100.0;
+        if (n < 4) {
+            const g = coordA;
+            const b = coordB;
+            const r = (y - g * kG - b * kB) / kR;
+            if (HctSolver.isBounded(r)) {
+                return [r, g, b];
+            }
+            else {
+                return [-1, -1, -1];
+            }
+        }
+        else if (n < 8) {
+            const b = coordA;
+            const r = coordB;
+            const g = (y - r * kR - b * kB) / kG;
+            if (HctSolver.isBounded(g)) {
+                return [r, g, b];
+            }
+            else {
+                return [-1, -1, -1];
+            }
+        }
+        else {
+            const r = coordA;
+            const g = coordB;
+            const b = (y - r * kR - g * kG) / kB;
+            if (HctSolver.isBounded(b)) {
+                return [r, g, b];
+            }
+            else {
+                return [-1, -1, -1];
+            }
+        }
+    }
+    /**
+     * Finds the segment containing the desired color.
+     *
+     * @param y The Y value of the color.
+     * @param targetHue The hue of the color.
+     * @return A list of two sets of linear RGB coordinates, each
+     * corresponding to an endpoint of the segment containing the
+     * desired color.
+     */
+    static bisectToSegment(y, targetHue) {
+        let left = [-1, -1, -1];
+        let right = left;
+        let leftHue = 0.0;
+        let rightHue = 0.0;
+        let initialized = false;
+        let uncut = true;
+        for (let n = 0; n < 12; n++) {
+            const mid = HctSolver.nthVertex(y, n);
+            if (mid[0] < 0) {
+                continue;
+            }
+            const midHue = HctSolver.hueOf(mid);
+            if (!initialized) {
+                left = mid;
+                right = mid;
+                leftHue = midHue;
+                rightHue = midHue;
+                initialized = true;
+                continue;
+            }
+            if (uncut || HctSolver.areInCyclicOrder(leftHue, midHue, rightHue)) {
+                uncut = false;
+                if (HctSolver.areInCyclicOrder(leftHue, targetHue, midHue)) {
+                    right = mid;
+                    rightHue = midHue;
+                }
+                else {
+                    left = mid;
+                    leftHue = midHue;
+                }
+            }
+        }
+        return [left, right];
+    }
+    static midpoint(a, b) {
+        return [
+            (a[0] + b[0]) / 2,
+            (a[1] + b[1]) / 2,
+            (a[2] + b[2]) / 2,
+        ];
+    }
+    static criticalPlaneBelow(x) {
+        return Math.floor(x - 0.5);
+    }
+    static criticalPlaneAbove(x) {
+        return Math.ceil(x - 0.5);
+    }
+    /**
+     * Finds a color with the given Y and hue on the boundary of the
+     * cube.
+     *
+     * @param y The Y value of the color.
+     * @param targetHue The hue of the color.
+     * @return The desired color, in linear RGB coordinates.
+     */
+    static bisectToLimit(y, targetHue) {
+        const segment = HctSolver.bisectToSegment(y, targetHue);
+        let left = segment[0];
+        let leftHue = HctSolver.hueOf(left);
+        let right = segment[1];
+        for (let axis = 0; axis < 3; axis++) {
+            if (left[axis] !== right[axis]) {
+                let lPlane = -1;
+                let rPlane = 255;
+                if (left[axis] < right[axis]) {
+                    lPlane = HctSolver.criticalPlaneBelow(HctSolver.trueDelinearized(left[axis]));
+                    rPlane = HctSolver.criticalPlaneAbove(HctSolver.trueDelinearized(right[axis]));
+                }
+                else {
+                    lPlane = HctSolver.criticalPlaneAbove(HctSolver.trueDelinearized(left[axis]));
+                    rPlane = HctSolver.criticalPlaneBelow(HctSolver.trueDelinearized(right[axis]));
+                }
+                for (let i = 0; i < 8; i++) {
+                    if (Math.abs(rPlane - lPlane) <= 1) {
+                        break;
+                    }
+                    else {
+                        const mPlane = Math.floor((lPlane + rPlane) / 2.0);
+                        const midPlaneCoordinate = HctSolver.CRITICAL_PLANES[mPlane];
+                        const mid = HctSolver.setCoordinate(left, midPlaneCoordinate, right, axis);
+                        const midHue = HctSolver.hueOf(mid);
+                        if (HctSolver.areInCyclicOrder(leftHue, targetHue, midHue)) {
+                            right = mid;
+                            rPlane = mPlane;
+                        }
+                        else {
+                            left = mid;
+                            leftHue = midHue;
+                            lPlane = mPlane;
+                        }
+                    }
+                }
+            }
+        }
+        return HctSolver.midpoint(left, right);
+    }
+    static inverseChromaticAdaptation(adapted) {
+        const adaptedAbs = Math.abs(adapted);
+        const base = Math.max(0, 27.13 * adaptedAbs / (400.0 - adaptedAbs));
+        return signum(adapted) * Math.pow(base, 1.0 / 0.42);
+    }
+    /**
+     * Finds a color with the given hue, chroma, and Y.
+     *
+     * @param hueRadians The desired hue in radians.
+     * @param chroma The desired chroma.
+     * @param y The desired Y.
+     * @return The desired color as a hexadecimal integer, if found; 0
+     * otherwise.
+     */
+    static findResultByJ(hueRadians, chroma, y) {
+        // Initial estimate of j.
+        let j = Math.sqrt(y) * 11.0;
+        // ===========================================================
+        // Operations inlined from Cam16 to avoid repeated calculation
+        // ===========================================================
+        const viewingConditions = ViewingConditions.DEFAULT;
+        const tInnerCoeff = 1 / Math.pow(1.64 - Math.pow(0.29, viewingConditions.n), 0.73);
+        const eHue = 0.25 * (Math.cos(hueRadians + 2.0) + 3.8);
+        const p1 = eHue * (50000.0 / 13.0) * viewingConditions.nc * viewingConditions.ncb;
+        const hSin = Math.sin(hueRadians);
+        const hCos = Math.cos(hueRadians);
+        for (let iterationRound = 0; iterationRound < 5; iterationRound++) {
+            // ===========================================================
+            // Operations inlined from Cam16 to avoid repeated calculation
+            // ===========================================================
+            const jNormalized = j / 100.0;
+            const alpha = chroma === 0.0 || j === 0.0 ? 0.0 : chroma / Math.sqrt(jNormalized);
+            const t = Math.pow(alpha * tInnerCoeff, 1.0 / 0.9);
+            const ac = viewingConditions.aw *
+                Math.pow(jNormalized, 1.0 / viewingConditions.c / viewingConditions.z);
+            const p2 = ac / viewingConditions.nbb;
+            const gamma = 23.0 * (p2 + 0.305) * t /
+                (23.0 * p1 + 11 * t * hCos + 108.0 * t * hSin);
+            const a = gamma * hCos;
+            const b = gamma * hSin;
+            const rA = (460.0 * p2 + 451.0 * a + 288.0 * b) / 1403.0;
+            const gA = (460.0 * p2 - 891.0 * a - 261.0 * b) / 1403.0;
+            const bA = (460.0 * p2 - 220.0 * a - 6300.0 * b) / 1403.0;
+            const rCScaled = HctSolver.inverseChromaticAdaptation(rA);
+            const gCScaled = HctSolver.inverseChromaticAdaptation(gA);
+            const bCScaled = HctSolver.inverseChromaticAdaptation(bA);
+            const linrgb = matrixMultiply([rCScaled, gCScaled, bCScaled], HctSolver.LINRGB_FROM_SCALED_DISCOUNT);
+            // ===========================================================
+            // Operations inlined from Cam16 to avoid repeated calculation
+            // ===========================================================
+            if (linrgb[0] < 0 || linrgb[1] < 0 || linrgb[2] < 0) {
+                return 0;
+            }
+            const kR = HctSolver.Y_FROM_LINRGB[0];
+            const kG = HctSolver.Y_FROM_LINRGB[1];
+            const kB = HctSolver.Y_FROM_LINRGB[2];
+            const fnj = kR * linrgb[0] + kG * linrgb[1] + kB * linrgb[2];
+            if (fnj <= 0) {
+                return 0;
+            }
+            if (iterationRound === 4 || Math.abs(fnj - y) < 0.002) {
+                if (linrgb[0] > 100.01 || linrgb[1] > 100.01 || linrgb[2] > 100.01) {
+                    return 0;
+                }
+                return argbFromLinrgb(linrgb);
+            }
+            // Iterates with Newton method,
+            // Using 2 * fn(j) / j as the approximation of fn'(j)
+            j = j - (fnj - y) * j / (2 * fnj);
+        }
+        return 0;
+    }
+    /**
+     * Finds an sRGB color with the given hue, chroma, and L*, if
+     * possible.
+     *
+     * @param hueDegrees The desired hue, in degrees.
+     * @param chroma The desired chroma.
+     * @param lstar The desired L*.
+     * @return A hexadecimal representing the sRGB color. The color
+     * has sufficiently close hue, chroma, and L* to the desired
+     * values, if possible; otherwise, the hue and L* will be
+     * sufficiently close, and chroma will be maximized.
+     */
+    static solveToInt(hueDegrees, chroma, lstar) {
+        if (chroma < 0.0001 || lstar < 0.0001 || lstar > 99.9999) {
+            return argbFromLstar(lstar);
+        }
+        hueDegrees = sanitizeDegreesDouble(hueDegrees);
+        const hueRadians = hueDegrees / 180 * Math.PI;
+        const y = yFromLstar(lstar);
+        const exactAnswer = HctSolver.findResultByJ(hueRadians, chroma, y);
+        if (exactAnswer !== 0) {
+            return exactAnswer;
+        }
+        const linrgb = HctSolver.bisectToLimit(y, hueRadians);
+        return argbFromLinrgb(linrgb);
+    }
+    /**
+     * Finds an sRGB color with the given hue, chroma, and L*, if
+     * possible.
+     *
+     * @param hueDegrees The desired hue, in degrees.
+     * @param chroma The desired chroma.
+     * @param lstar The desired L*.
+     * @return An CAM16 object representing the sRGB color. The color
+     * has sufficiently close hue, chroma, and L* to the desired
+     * values, if possible; otherwise, the hue and L* will be
+     * sufficiently close, and chroma will be maximized.
+     */
+    static solveToCam(hueDegrees, chroma, lstar) {
+        return Cam16.fromInt(HctSolver.solveToInt(hueDegrees, chroma, lstar));
+    }
+}
+HctSolver.SCALED_DISCOUNT_FROM_LINRGB = [
+    [
+        0.001200833568784504,
+        0.002389694492170889,
+        0.0002795742885861124,
+    ],
+    [
+        0.0005891086651375999,
+        0.0029785502573438758,
+        0.0003270666104008398,
+    ],
+    [
+        0.00010146692491640572,
+        0.0005364214359186694,
+        0.0032979401770712076,
+    ],
+];
+HctSolver.LINRGB_FROM_SCALED_DISCOUNT = [
+    [
+        1373.2198709594231,
+        -1100.4251190754821,
+        -7.278681089101213,
+    ],
+    [
+        -271.815969077903,
+        559.6580465940733,
+        -32.46047482791194,
+    ],
+    [
+        1.9622899599665666,
+        -57.173814538844006,
+        308.7233197812385,
+    ],
+];
+HctSolver.Y_FROM_LINRGB = [0.2126, 0.7152, 0.0722];
+HctSolver.CRITICAL_PLANES = [
+    0.015176349177441876, 0.045529047532325624, 0.07588174588720938,
+    0.10623444424209313, 0.13658714259697685, 0.16693984095186062,
+    0.19729253930674434, 0.2276452376616281, 0.2579979360165119,
+    0.28835063437139563, 0.3188300904430532, 0.350925934958123,
+    0.3848314933096426, 0.42057480301049466, 0.458183274052838,
+    0.4976837250274023, 0.5391024159806381, 0.5824650784040898,
+    0.6277969426914107, 0.6751227633498623, 0.7244668422128921,
+    0.775853049866786, 0.829304845476233, 0.8848452951698498,
+    0.942497089126609, 1.0022825574869039, 1.0642236851973577,
+    1.1283421258858297, 1.1946592148522128, 1.2631959812511864,
+    1.3339731595349034, 1.407011200216447, 1.4823302800086415,
+    1.5599503113873272, 1.6398909516233677, 1.7221716113234105,
+    1.8068114625156377, 1.8938294463134073, 1.9832442801866852,
+    2.075074464868551, 2.1693382909216234, 2.2660538449872063,
+    2.36523901573795, 2.4669114995532007, 2.5710888059345764,
+    2.6777882626779785, 2.7870270208169257, 2.898822059350997,
+    3.0131901897720907, 3.1301480604002863, 3.2497121605402226,
+    3.3718988244681087, 3.4967242352587946, 3.624204428461639,
+    3.754355295633311, 3.887192587735158, 4.022731918402185,
+    4.160988767090289, 4.301978482107941, 4.445716283538092,
+    4.592217266055746, 4.741496401646282, 4.893568542229298,
+    5.048448422192488, 5.20615066083972, 5.3666897647573375,
+    5.5300801301023865, 5.696336044816294, 5.865471690767354,
+    6.037501145825082, 6.212438385869475, 6.390297286737924,
+    6.571091626112461, 6.7548350853498045, 6.941541251256611,
+    7.131223617812143, 7.323895587840543, 7.5195704746346665,
+    7.7182615035334345, 7.919981813454504, 8.124744458384042,
+    8.332562408825165, 8.543448553206703, 8.757415699253682,
+    8.974476575321063, 9.194643831691977, 9.417930041841839,
+    9.644347703669503, 9.873909240696694, 10.106627003236781,
+    10.342513269534024, 10.58158024687427, 10.8238400726681,
+    11.069304815507364, 11.317986476196008, 11.569896988756009,
+    11.825048221409341, 12.083451977536606, 12.345119996613247,
+    12.610063955123938, 12.878295467455942, 13.149826086772048,
+    13.42466730586372, 13.702830557985108, 13.984327217668513,
+    14.269168601521828, 14.55736596900856, 14.848930523210871,
+    15.143873411576273, 15.44220572664832, 15.743938506781891,
+    16.04908273684337, 16.35764934889634, 16.66964922287304,
+    16.985093187232053, 17.30399201960269, 17.62635644741625,
+    17.95219714852476, 18.281524751807332, 18.614349837764564,
+    18.95068293910138, 19.290534541298456, 19.633915083172692,
+    19.98083495742689, 20.331304511189067, 20.685334046541502,
+    21.042933821039977, 21.404114048223256, 21.76888489811322,
+    22.137256497705877, 22.50923893145328, 22.884842241736916,
+    23.264076429332462, 23.6469514538663, 24.033477234264016,
+    24.42366364919083, 24.817520537484558, 25.21505769858089,
+    25.61628489293138, 26.021211842414342, 26.429848230738664,
+    26.842203703840827, 27.258287870275353, 27.678110301598522,
+    28.10168053274597, 28.529008062403893, 28.96010235337422,
+    29.39497283293396, 29.83362889318845, 30.276079891419332,
+    30.722335150426627, 31.172403958865512, 31.62629557157785,
+    32.08401920991837, 32.54558406207592, 33.010999283389665,
+    33.4802739966603, 33.953417292456834, 34.430438229418264,
+    34.911345834551085, 35.39614910352207, 35.88485700094671,
+    36.37747846067349, 36.87402238606382, 37.37449765026789,
+    37.87891309649659, 38.38727753828926, 38.89959975977785,
+    39.41588851594697, 39.93615253289054, 40.460400508064545,
+    40.98864111053629, 41.520882981230194, 42.05713473317016,
+    42.597404951718396, 43.141702194811224, 43.6900349931913,
+    44.24241185063697, 44.798841244188324, 45.35933162437017,
+    45.92389141541209, 46.49252901546552, 47.065252796817916,
+    47.64207110610409, 48.22299226451468, 48.808024568002054,
+    49.3971762874833, 49.9904556690408, 50.587870934119984,
+    51.189430279724725, 51.79514187861014, 52.40501387947288,
+    53.0190544071392, 53.637271562750364, 54.259673423945976,
+    54.88626804504493, 55.517063457223934, 56.15206766869424,
+    56.79128866487574, 57.43473440856916, 58.08241284012621,
+    58.734331877617365, 59.39049941699807, 60.05092333227251,
+    60.715611475655585, 61.38457167773311, 62.057811747619894,
+    62.7353394731159, 63.417162620860914, 64.10328893648692,
+    64.79372614476921, 65.48848194977529, 66.18756403501224,
+    66.89098006357258, 67.59873767827808, 68.31084450182222,
+    69.02730813691093, 69.74813616640164, 70.47333615344107,
+    71.20291564160104, 71.93688215501312, 72.67524319850172,
+    73.41800625771542, 74.16517879925733, 74.9167682708136,
+    75.67278210128072, 76.43322770089146, 77.1981124613393,
+    77.96744375590167, 78.74122893956174, 79.51947534912904,
+    80.30219030335869, 81.08938110306934, 81.88105503125999,
+    82.67721935322541, 83.4778813166706, 84.28304815182372,
+    85.09272707154808, 85.90692527145302, 86.72564993000343,
+    87.54890820862819, 88.3767072518277, 89.2090541872801,
+    90.04595612594655, 90.88742016217518, 91.73345337380438,
+    92.58406282226491, 93.43925555268066, 94.29903859396902,
+    95.16341895893969, 96.03240364439274, 96.9059996312159,
+    97.78421388448044, 98.6670533535366, 99.55452497210776,
+];
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A color system built using CAM16 hue and chroma, and L* from
+ * L*a*b*.
+ *
+ * Using L* creates a link between the color system, contrast, and thus
+ * accessibility. Contrast ratio depends on relative luminance, or Y in the XYZ
+ * color space. L*, or perceptual luminance can be calculated from Y.
+ *
+ * Unlike Y, L* is linear to human perception, allowing trivial creation of
+ * accurate color tones.
+ *
+ * Unlike contrast ratio, measuring contrast in L* is linear, and simple to
+ * calculate. A difference of 40 in HCT tone guarantees a contrast ratio >= 3.0,
+ * and a difference of 50 guarantees a contrast ratio >= 4.5.
+ */
+/**
+ * HCT, hue, chroma, and tone. A color system that provides a perceptually
+ * accurate color measurement system that can also accurately render what colors
+ * will appear as in different lighting environments.
+ */
+class Hct {
+    static from(hue, chroma, tone) {
+        return new Hct(HctSolver.solveToInt(hue, chroma, tone));
+    }
+    /**
+     * @param argb ARGB representation of a color.
+     * @return HCT representation of a color in default viewing conditions
+     */
+    static fromInt(argb) {
+        return new Hct(argb);
+    }
+    toInt() {
+        return this.argb;
+    }
+    /**
+     * A number, in degrees, representing ex. red, orange, yellow, etc.
+     * Ranges from 0 <= hue < 360.
+     */
+    get hue() {
+        return this.internalHue;
+    }
+    /**
+     * @param newHue 0 <= newHue < 360; invalid values are corrected.
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set hue(newHue) {
+        this.setInternalState(HctSolver.solveToInt(newHue, this.internalChroma, this.internalTone));
+    }
+    get chroma() {
+        return this.internalChroma;
+    }
+    /**
+     * @param newChroma 0 <= newChroma < ?
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set chroma(newChroma) {
+        this.setInternalState(HctSolver.solveToInt(this.internalHue, newChroma, this.internalTone));
+    }
+    /** Lightness. Ranges from 0 to 100. */
+    get tone() {
+        return this.internalTone;
+    }
+    /**
+     * @param newTone 0 <= newTone <= 100; invalid valids are corrected.
+     * Chroma may decrease because chroma has a different maximum for any given
+     * hue and tone.
+     */
+    set tone(newTone) {
+        this.setInternalState(HctSolver.solveToInt(this.internalHue, this.internalChroma, newTone));
+    }
+    constructor(argb) {
+        this.argb = argb;
+        const cam = Cam16.fromInt(argb);
+        this.internalHue = cam.hue;
+        this.internalChroma = cam.chroma;
+        this.internalTone = lstarFromArgb(argb);
+        this.argb = argb;
+    }
+    setInternalState(argb) {
+        const cam = Cam16.fromInt(argb);
+        this.internalHue = cam.hue;
+        this.internalChroma = cam.chroma;
+        this.internalTone = lstarFromArgb(argb);
+        this.argb = argb;
+    }
+    /**
+     * Translates a color into different [ViewingConditions].
+     *
+     * Colors change appearance. They look different with lights on versus off,
+     * the same color, as in hex code, on white looks different when on black.
+     * This is called color relativity, most famously explicated by Josef Albers
+     * in Interaction of Color.
+     *
+     * In color science, color appearance models can account for this and
+     * calculate the appearance of a color in different settings. HCT is based on
+     * CAM16, a color appearance model, and uses it to make these calculations.
+     *
+     * See [ViewingConditions.make] for parameters affecting color appearance.
+     */
+    inViewingConditions(vc) {
+        // 1. Use CAM16 to find XYZ coordinates of color in specified VC.
+        const cam = Cam16.fromInt(this.toInt());
+        const viewedInVc = cam.xyzInViewingConditions(vc);
+        // 2. Create CAM16 of those XYZ coordinates in default VC.
+        const recastInVc = Cam16.fromXyzInViewingConditions(viewedInVc[0], viewedInVc[1], viewedInVc[2], ViewingConditions.make());
+        // 3. Create HCT from:
+        // - CAM16 using default VC with XYZ coordinates in specified VC.
+        // - L* converted from Y in XYZ coordinates in specified VC.
+        const recastHct = Hct.from(recastInVc.hue, recastInVc.chroma, lstarFromY(viewedInVc[1]));
+        return recastHct;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable:class-as-namespace
+/**
+ * Utility methods for calculating contrast given two colors, or calculating a
+ * color given one color and a contrast ratio.
+ *
+ * Contrast ratio is calculated using XYZ's Y. When linearized to match human
+ * perception, Y becomes HCT's tone and L*a*b*'s' L*. Informally, this is the
+ * lightness of a color.
+ *
+ * Methods refer to tone, T in the the HCT color space.
+ * Tone is equivalent to L* in the L*a*b* color space, or L in the LCH color
+ * space.
+ */
+class Contrast {
+    /**
+     * Returns a contrast ratio, which ranges from 1 to 21.
+     *
+     * @param toneA Tone between 0 and 100. Values outside will be clamped.
+     * @param toneB Tone between 0 and 100. Values outside will be clamped.
+     */
+    static ratioOfTones(toneA, toneB) {
+        toneA = clampDouble(0.0, 100.0, toneA);
+        toneB = clampDouble(0.0, 100.0, toneB);
+        return Contrast.ratioOfYs(yFromLstar(toneA), yFromLstar(toneB));
+    }
+    static ratioOfYs(y1, y2) {
+        const lighter = y1 > y2 ? y1 : y2;
+        const darker = (lighter === y2) ? y1 : y2;
+        return (lighter + 5.0) / (darker + 5.0);
+    }
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns -1 if ratio cannot be achieved with tone parameter.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in -1 being returned.
+     * @param ratio Contrast ratio of return value and tone.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static lighter(tone, ratio) {
+        if (tone < 0.0 || tone > 100.0) {
+            return -1;
+        }
+        const darkY = yFromLstar(tone);
+        const lightY = ratio * (darkY + 5.0) - 5.0;
+        const realContrast = Contrast.ratioOfYs(lightY, darkY);
+        const delta = Math.abs(realContrast - ratio);
+        if (realContrast < ratio && delta > 0.04) {
+            return -1;
+        }
+        // Ensure gamut mapping, which requires a 'range' on tone, will still result
+        // the correct ratio by darkening slightly.
+        const returnValue = lstarFromY(lightY) + 0.4;
+        if (returnValue < 0 || returnValue > 100) {
+            return -1;
+        }
+        return returnValue;
+    }
+    /**
+     * Returns a tone <= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns -1 if ratio cannot be achieved with tone parameter.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in -1 being returned.
+     * @param ratio Contrast ratio of return value and tone.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static darker(tone, ratio) {
+        if (tone < 0.0 || tone > 100.0) {
+            return -1;
+        }
+        const lightY = yFromLstar(tone);
+        const darkY = ((lightY + 5.0) / ratio) - 5.0;
+        const realContrast = Contrast.ratioOfYs(lightY, darkY);
+        const delta = Math.abs(realContrast - ratio);
+        if (realContrast < ratio && delta > 0.04) {
+            return -1;
+        }
+        // Ensure gamut mapping, which requires a 'range' on tone, will still result
+        // the correct ratio by darkening slightly.
+        const returnValue = lstarFromY(darkY) - 0.4;
+        if (returnValue < 0 || returnValue > 100) {
+            return -1;
+        }
+        return returnValue;
+    }
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns 100 if ratio cannot be achieved with tone parameter.
+     *
+     * This method is unsafe because the returned value is guaranteed to be in
+     * bounds for tone, i.e. between 0 and 100. However, that value may not reach
+     * the ratio with tone. For example, there is no color lighter than T100.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in 100 being returned.
+     * @param ratio Desired contrast ratio of return value and tone parameter.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static lighterUnsafe(tone, ratio) {
+        const lighterSafe = Contrast.lighter(tone, ratio);
+        return (lighterSafe < 0.0) ? 100.0 : lighterSafe;
+    }
+    /**
+     * Returns a tone >= tone parameter that ensures ratio parameter.
+     * Return value is between 0 and 100.
+     * Returns 100 if ratio cannot be achieved with tone parameter.
+     *
+     * This method is unsafe because the returned value is guaranteed to be in
+     * bounds for tone, i.e. between 0 and 100. However, that value may not reach
+     * the [ratio with [tone]. For example, there is no color darker than T0.
+     *
+     * @param tone Tone return value must contrast with.
+     * Range is 0 to 100. Invalid values will result in 0 being returned.
+     * @param ratio Desired contrast ratio of return value and tone parameter.
+     * Range is 1 to 21, invalid values have undefined behavior.
+     */
+    static darkerUnsafe(tone, ratio) {
+        const darkerSafe = Contrast.darker(tone, ratio);
+        return (darkerSafe < 0.0) ? 0.0 : darkerSafe;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// material_color_utilities is designed to have a consistent API across
+// platforms and modular components that can be moved around easily. Using a
+// class as a namespace facilitates this.
+//
+// tslint:disable:class-as-namespace
+/**
+ * Check and/or fix universally disliked colors.
+ * Color science studies of color preference indicate universal distaste for
+ * dark yellow-greens, and also show this is correlated to distate for
+ * biological waste and rotting food.
+ *
+ * See Palmer and Schloss, 2010 or Schloss and Palmer's Chapter 21 in Handbook
+ * of Color Psychology (2015).
+ */
+class DislikeAnalyzer {
+    /**
+     * Returns true if a color is disliked.
+     *
+     * @param hct A color to be judged.
+     * @return Whether the color is disliked.
+     *
+     * Disliked is defined as a dark yellow-green that is not neutral.
+     */
+    static isDisliked(hct) {
+        const huePasses = Math.round(hct.hue) >= 90.0 && Math.round(hct.hue) <= 111.0;
+        const chromaPasses = Math.round(hct.chroma) > 16.0;
+        const tonePasses = Math.round(hct.tone) < 65.0;
+        return huePasses && chromaPasses && tonePasses;
+    }
+    /**
+     * If a color is disliked, lighten it to make it likable.
+     *
+     * @param hct A color to be judged.
+     * @return A new color if the original color is disliked, or the original
+     *   color if it is acceptable.
+     */
+    static fixIfDisliked(hct) {
+        if (DislikeAnalyzer.isDisliked(hct)) {
+            return Hct.from(hct.hue, hct.chroma, 70.0);
+        }
+        return hct;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A color that adjusts itself based on UI state provided by DynamicScheme.
+ *
+ * Colors without backgrounds do not change tone when contrast changes. Colors
+ * with backgrounds become closer to their background as contrast lowers, and
+ * further when contrast increases.
+ *
+ * Prefer static constructors. They require either a hexcode, a palette and
+ * tone, or a hue and chroma. Optionally, they can provide a background
+ * DynamicColor.
+ */
+class DynamicColor {
+    /**
+     * Create a DynamicColor defined by a TonalPalette and HCT tone.
+     *
+     * @param args Functions with DynamicScheme as input. Must provide a palette
+     * and tone. May provide a background DynamicColor and ToneDeltaConstraint.
+     */
+    static fromPalette(args) {
+        return new DynamicColor(args.name ?? '', args.palette, args.tone, args.isBackground ?? false, args.background, args.secondBackground, args.contrastCurve, args.toneDeltaPair);
+    }
+    /**
+     * The base constructor for DynamicColor.
+     *
+     * _Strongly_ prefer using one of the convenience constructors. This class is
+     * arguably too flexible to ensure it can support any scenario. Functional
+     * arguments allow  overriding without risks that come with subclasses.
+     *
+     * For example, the default behavior of adjust tone at max contrast
+     * to be at a 7.0 ratio with its background is principled and
+     * matches accessibility guidance. That does not mean it's the desired
+     * approach for _every_ design system, and every color pairing,
+     * always, in every case.
+     *
+     * @param name The name of the dynamic color. Defaults to empty.
+     * @param palette Function that provides a TonalPalette given
+     * DynamicScheme. A TonalPalette is defined by a hue and chroma, so this
+     * replaces the need to specify hue/chroma. By providing a tonal palette, when
+     * contrast adjustments are made, intended chroma can be preserved.
+     * @param tone Function that provides a tone, given a DynamicScheme.
+     * @param isBackground Whether this dynamic color is a background, with
+     * some other color as the foreground. Defaults to false.
+     * @param background The background of the dynamic color (as a function of a
+     *     `DynamicScheme`), if it exists.
+     * @param secondBackground A second background of the dynamic color (as a
+     *     function of a `DynamicScheme`), if it
+     * exists.
+     * @param contrastCurve A `ContrastCurve` object specifying how its contrast
+     * against its background should behave in various contrast levels options.
+     * @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
+     * constraint between two colors. One of them must be the color being
+     * constructed.
+     */
+    constructor(name, palette, tone, isBackground, background, secondBackground, contrastCurve, toneDeltaPair) {
+        this.name = name;
+        this.palette = palette;
+        this.tone = tone;
+        this.isBackground = isBackground;
+        this.background = background;
+        this.secondBackground = secondBackground;
+        this.contrastCurve = contrastCurve;
+        this.toneDeltaPair = toneDeltaPair;
+        this.hctCache = new Map();
+        if ((!background) && secondBackground) {
+            throw new Error(`Color ${name} has secondBackground` +
+                `defined, but background is not defined.`);
+        }
+        if ((!background) && contrastCurve) {
+            throw new Error(`Color ${name} has contrastCurve` +
+                `defined, but background is not defined.`);
+        }
+        if (background && !contrastCurve) {
+            throw new Error(`Color ${name} has background` +
+                `defined, but contrastCurve is not defined.`);
+        }
+    }
+    /**
+     * Return a ARGB integer (i.e. a hex code).
+     *
+     * @param scheme Defines the conditions of the user interface, for example,
+     * whether or not it is dark mode or light mode, and what the desired
+     * contrast level is.
+     */
+    getArgb(scheme) {
+        return this.getHct(scheme).toInt();
+    }
+    /**
+     * Return a color, expressed in the HCT color space, that this
+     * DynamicColor is under the conditions in scheme.
+     *
+     * @param scheme Defines the conditions of the user interface, for example,
+     * whether or not it is dark mode or light mode, and what the desired
+     * contrast level is.
+     */
+    getHct(scheme) {
+        const cachedAnswer = this.hctCache.get(scheme);
+        if (cachedAnswer != null) {
+            return cachedAnswer;
+        }
+        const tone = this.getTone(scheme);
+        const answer = this.palette(scheme).getHct(tone);
+        if (this.hctCache.size > 4) {
+            this.hctCache.clear();
+        }
+        this.hctCache.set(scheme, answer);
+        return answer;
+    }
+    /**
+     * Return a tone, T in the HCT color space, that this DynamicColor is under
+     * the conditions in scheme.
+     *
+     * @param scheme Defines the conditions of the user interface, for example,
+     * whether or not it is dark mode or light mode, and what the desired
+     * contrast level is.
+     */
+    getTone(scheme) {
+        const decreasingContrast = scheme.contrastLevel < 0;
+        // Case 1: dual foreground, pair of colors with delta constraint.
+        if (this.toneDeltaPair) {
+            const toneDeltaPair = this.toneDeltaPair(scheme);
+            const roleA = toneDeltaPair.roleA;
+            const roleB = toneDeltaPair.roleB;
+            const delta = toneDeltaPair.delta;
+            const polarity = toneDeltaPair.polarity;
+            const stayTogether = toneDeltaPair.stayTogether;
+            const bg = this.background(scheme);
+            const bgTone = bg.getTone(scheme);
+            const aIsNearer = (polarity === 'nearer' ||
+                (polarity === 'lighter' && !scheme.isDark) ||
+                (polarity === 'darker' && scheme.isDark));
+            const nearer = aIsNearer ? roleA : roleB;
+            const farther = aIsNearer ? roleB : roleA;
+            const amNearer = this.name === nearer.name;
+            const expansionDir = scheme.isDark ? 1 : -1;
+            // 1st round: solve to min, each
+            const nContrast = nearer.contrastCurve.get(scheme.contrastLevel);
+            const fContrast = farther.contrastCurve.get(scheme.contrastLevel);
+            // If a color is good enough, it is not adjusted.
+            // Initial and adjusted tones for `nearer`
+            const nInitialTone = nearer.tone(scheme);
+            let nTone = Contrast.ratioOfTones(bgTone, nInitialTone) >= nContrast ?
+                nInitialTone :
+                DynamicColor.foregroundTone(bgTone, nContrast);
+            // Initial and adjusted tones for `farther`
+            const fInitialTone = farther.tone(scheme);
+            let fTone = Contrast.ratioOfTones(bgTone, fInitialTone) >= fContrast ?
+                fInitialTone :
+                DynamicColor.foregroundTone(bgTone, fContrast);
+            if (decreasingContrast) {
+                // If decreasing contrast, adjust color to the "bare minimum"
+                // that satisfies contrast.
+                nTone = DynamicColor.foregroundTone(bgTone, nContrast);
+                fTone = DynamicColor.foregroundTone(bgTone, fContrast);
+            }
+            if ((fTone - nTone) * expansionDir >= delta) ;
+            else {
+                // 2nd round: expand farther to match delta.
+                fTone = clampDouble(0, 100, nTone + delta * expansionDir);
+                if ((fTone - nTone) * expansionDir >= delta) ;
+                else {
+                    // 3rd round: contract nearer to match delta.
+                    nTone = clampDouble(0, 100, fTone - delta * expansionDir);
+                }
+            }
+            // Avoids the 50-59 awkward zone.
+            if (50 <= nTone && nTone < 60) {
+                // If `nearer` is in the awkward zone, move it away, together with
+                // `farther`.
+                if (expansionDir > 0) {
+                    nTone = 60;
+                    fTone = Math.max(fTone, nTone + delta * expansionDir);
+                }
+                else {
+                    nTone = 49;
+                    fTone = Math.min(fTone, nTone + delta * expansionDir);
+                }
+            }
+            else if (50 <= fTone && fTone < 60) {
+                if (stayTogether) {
+                    // Fixes both, to avoid two colors on opposite sides of the "awkward
+                    // zone".
+                    if (expansionDir > 0) {
+                        nTone = 60;
+                        fTone = Math.max(fTone, nTone + delta * expansionDir);
+                    }
+                    else {
+                        nTone = 49;
+                        fTone = Math.min(fTone, nTone + delta * expansionDir);
+                    }
+                }
+                else {
+                    // Not required to stay together; fixes just one.
+                    if (expansionDir > 0) {
+                        fTone = 60;
+                    }
+                    else {
+                        fTone = 49;
+                    }
+                }
+            }
+            // Returns `nTone` if this color is `nearer`, otherwise `fTone`.
+            return amNearer ? nTone : fTone;
+        }
+        else {
+            // Case 2: No contrast pair; just solve for itself.
+            let answer = this.tone(scheme);
+            if (this.background == null) {
+                return answer; // No adjustment for colors with no background.
+            }
+            const bgTone = this.background(scheme).getTone(scheme);
+            const desiredRatio = this.contrastCurve.get(scheme.contrastLevel);
+            if (Contrast.ratioOfTones(bgTone, answer) >= desiredRatio) ;
+            else {
+                // Rough improvement.
+                answer = DynamicColor.foregroundTone(bgTone, desiredRatio);
+            }
+            if (decreasingContrast) {
+                answer = DynamicColor.foregroundTone(bgTone, desiredRatio);
+            }
+            if (this.isBackground && 50 <= answer && answer < 60) {
+                // Must adjust
+                if (Contrast.ratioOfTones(49, bgTone) >= desiredRatio) {
+                    answer = 49;
+                }
+                else {
+                    answer = 60;
+                }
+            }
+            if (this.secondBackground) {
+                // Case 3: Adjust for dual backgrounds.
+                const [bg1, bg2] = [this.background, this.secondBackground];
+                const [bgTone1, bgTone2] = [bg1(scheme).getTone(scheme), bg2(scheme).getTone(scheme)];
+                const [upper, lower] = [Math.max(bgTone1, bgTone2), Math.min(bgTone1, bgTone2)];
+                if (Contrast.ratioOfTones(upper, answer) >= desiredRatio &&
+                    Contrast.ratioOfTones(lower, answer) >= desiredRatio) {
+                    return answer;
+                }
+                // The darkest light tone that satisfies the desired ratio,
+                // or -1 if such ratio cannot be reached.
+                const lightOption = Contrast.lighter(upper, desiredRatio);
+                // The lightest dark tone that satisfies the desired ratio,
+                // or -1 if such ratio cannot be reached.
+                const darkOption = Contrast.darker(lower, desiredRatio);
+                // Tones suitable for the foreground.
+                const availables = [];
+                if (lightOption !== -1)
+                    availables.push(lightOption);
+                if (darkOption !== -1)
+                    availables.push(darkOption);
+                const prefersLight = DynamicColor.tonePrefersLightForeground(bgTone1) ||
+                    DynamicColor.tonePrefersLightForeground(bgTone2);
+                if (prefersLight) {
+                    return (lightOption < 0) ? 100 : lightOption;
+                }
+                if (availables.length === 1) {
+                    return availables[0];
+                }
+                return (darkOption < 0) ? 0 : darkOption;
+            }
+            return answer;
+        }
+    }
+    /**
+     * Given a background tone, find a foreground tone, while ensuring they reach
+     * a contrast ratio that is as close to [ratio] as possible.
+     *
+     * @param bgTone Tone in HCT. Range is 0 to 100, undefined behavior when it
+     *     falls outside that range.
+     * @param ratio The contrast ratio desired between bgTone and the return
+     *     value.
+     */
+    static foregroundTone(bgTone, ratio) {
+        const lighterTone = Contrast.lighterUnsafe(bgTone, ratio);
+        const darkerTone = Contrast.darkerUnsafe(bgTone, ratio);
+        const lighterRatio = Contrast.ratioOfTones(lighterTone, bgTone);
+        const darkerRatio = Contrast.ratioOfTones(darkerTone, bgTone);
+        const preferLighter = DynamicColor.tonePrefersLightForeground(bgTone);
+        if (preferLighter) {
+            // This handles an edge case where the initial contrast ratio is high
+            // (ex. 13.0), and the ratio passed to the function is that high
+            // ratio, and both the lighter and darker ratio fails to pass that
+            // ratio.
+            //
+            // This was observed with Tonal Spot's On Primary Container turning
+            // black momentarily between high and max contrast in light mode. PC's
+            // standard tone was T90, OPC's was T10, it was light mode, and the
+            // contrast value was 0.6568521221032331.
+            const negligibleDifference = Math.abs(lighterRatio - darkerRatio) < 0.1 &&
+                lighterRatio < ratio && darkerRatio < ratio;
+            return lighterRatio >= ratio || lighterRatio >= darkerRatio ||
+                negligibleDifference ?
+                lighterTone :
+                darkerTone;
+        }
+        else {
+            return darkerRatio >= ratio || darkerRatio >= lighterRatio ? darkerTone :
+                lighterTone;
+        }
+    }
+    /**
+     * Returns whether [tone] prefers a light foreground.
+     *
+     * People prefer white foregrounds on ~T60-70. Observed over time, and also
+     * by Andrew Somers during research for APCA.
+     *
+     * T60 used as to create the smallest discontinuity possible when skipping
+     * down to T49 in order to ensure light foregrounds.
+     * Since `tertiaryContainer` in dark monochrome scheme requires a tone of
+     * 60, it should not be adjusted. Therefore, 60 is excluded here.
+     */
+    static tonePrefersLightForeground(tone) {
+        return Math.round(tone) < 60.0;
+    }
+    /**
+     * Returns whether [tone] can reach a contrast ratio of 4.5 with a lighter
+     * color.
+     */
+    static toneAllowsLightForeground(tone) {
+        return Math.round(tone) <= 49.0;
+    }
+    /**
+     * Adjust a tone such that white has 4.5 contrast, if the tone is
+     * reasonably close to supporting it.
+     */
+    static enableLightForeground(tone) {
+        if (DynamicColor.tonePrefersLightForeground(tone) &&
+            !DynamicColor.toneAllowsLightForeground(tone)) {
+            return 49.0;
+        }
+        return tone;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ *  A convenience class for retrieving colors that are constant in hue and
+ *  chroma, but vary in tone.
+ */
+class TonalPalette {
+    /**
+     * @param argb ARGB representation of a color
+     * @return Tones matching that color's hue and chroma.
+     */
+    static fromInt(argb) {
+        const hct = Hct.fromInt(argb);
+        return TonalPalette.fromHct(hct);
+    }
+    /**
+     * @param hct Hct
+     * @return Tones matching that color's hue and chroma.
+     */
+    static fromHct(hct) {
+        return new TonalPalette(hct.hue, hct.chroma, hct);
+    }
+    /**
+     * @param hue HCT hue
+     * @param chroma HCT chroma
+     * @return Tones matching hue and chroma.
+     */
+    static fromHueAndChroma(hue, chroma) {
+        const keyColor = new KeyColor(hue, chroma).create();
+        return new TonalPalette(hue, chroma, keyColor);
+    }
+    constructor(hue, chroma, keyColor) {
+        this.hue = hue;
+        this.chroma = chroma;
+        this.keyColor = keyColor;
+        this.cache = new Map();
+    }
+    /**
+     * @param tone HCT tone, measured from 0 to 100.
+     * @return ARGB representation of a color with that tone.
+     */
+    tone(tone) {
+        let argb = this.cache.get(tone);
+        if (argb === undefined) {
+            argb = Hct.from(this.hue, this.chroma, tone).toInt();
+            this.cache.set(tone, argb);
+        }
+        return argb;
+    }
+    /**
+     * @param tone HCT tone.
+     * @return HCT representation of a color with that tone.
+     */
+    getHct(tone) {
+        return Hct.fromInt(this.tone(tone));
+    }
+}
+/**
+ * Key color is a color that represents the hue and chroma of a tonal palette
+ */
+class KeyColor {
+    constructor(hue, requestedChroma) {
+        this.hue = hue;
+        this.requestedChroma = requestedChroma;
+        // Cache that maps tone to max chroma to avoid duplicated HCT calculation.
+        this.chromaCache = new Map();
+        this.maxChromaValue = 200.0;
+    }
+    /**
+     * Creates a key color from a [hue] and a [chroma].
+     * The key color is the first tone, starting from T50, matching the given hue
+     * and chroma.
+     *
+     * @return Key color [Hct]
+     */
+    create() {
+        // Pivot around T50 because T50 has the most chroma available, on
+        // average. Thus it is most likely to have a direct answer.
+        const pivotTone = 50;
+        const toneStepSize = 1;
+        // Epsilon to accept values slightly higher than the requested chroma.
+        const epsilon = 0.01;
+        // Binary search to find the tone that can provide a chroma that is closest
+        // to the requested chroma.
+        let lowerTone = 0;
+        let upperTone = 100;
+        while (lowerTone < upperTone) {
+            const midTone = Math.floor((lowerTone + upperTone) / 2);
+            const isAscending = this.maxChroma(midTone) < this.maxChroma(midTone + toneStepSize);
+            const sufficientChroma = this.maxChroma(midTone) >= this.requestedChroma - epsilon;
+            if (sufficientChroma) {
+                // Either range [lowerTone, midTone] or [midTone, upperTone] has
+                // the answer, so search in the range that is closer the pivot tone.
+                if (Math.abs(lowerTone - pivotTone) < Math.abs(upperTone - pivotTone)) {
+                    upperTone = midTone;
+                }
+                else {
+                    if (lowerTone === midTone) {
+                        return Hct.from(this.hue, this.requestedChroma, lowerTone);
+                    }
+                    lowerTone = midTone;
+                }
+            }
+            else {
+                // As there is no sufficient chroma in the midTone, follow the direction
+                // to the chroma peak.
+                if (isAscending) {
+                    lowerTone = midTone + toneStepSize;
+                }
+                else {
+                    // Keep midTone for potential chroma peak.
+                    upperTone = midTone;
+                }
+            }
+        }
+        return Hct.from(this.hue, this.requestedChroma, lowerTone);
+    }
+    // Find the maximum chroma for a given tone
+    maxChroma(tone) {
+        if (this.chromaCache.has(tone)) {
+            return this.chromaCache.get(tone);
+        }
+        const chroma = Hct.from(this.hue, this.maxChromaValue, tone).chroma;
+        this.chromaCache.set(tone, chroma);
+        return chroma;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A class containing a value that changes with the contrast level.
+ *
+ * Usually represents the contrast requirements for a dynamic color on its
+ * background. The four values correspond to values for contrast levels -1.0,
+ * 0.0, 0.5, and 1.0, respectively.
+ */
+class ContrastCurve {
+    /**
+     * Creates a `ContrastCurve` object.
+     *
+     * @param low Value for contrast level -1.0
+     * @param normal Value for contrast level 0.0
+     * @param medium Value for contrast level 0.5
+     * @param high Value for contrast level 1.0
+     */
+    constructor(low, normal, medium, high) {
+        this.low = low;
+        this.normal = normal;
+        this.medium = medium;
+        this.high = high;
+    }
+    /**
+     * Returns the value at a given contrast level.
+     *
+     * @param contrastLevel The contrast level. 0.0 is the default (normal); -1.0
+     *     is the lowest; 1.0 is the highest.
+     * @return The value. For contrast ratios, a number between 1.0 and 21.0.
+     */
+    get(contrastLevel) {
+        if (contrastLevel <= -1) {
+            return this.low;
+        }
+        else if (contrastLevel < 0.0) {
+            return lerp(this.low, this.normal, (contrastLevel - (-1)) / 1);
+        }
+        else if (contrastLevel < 0.5) {
+            return lerp(this.normal, this.medium, (contrastLevel - 0) / 0.5);
+        }
+        else if (contrastLevel < 1.0) {
+            return lerp(this.medium, this.high, (contrastLevel - 0.5) / 0.5);
+        }
+        else {
+            return this.high;
+        }
+    }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Documents a constraint between two DynamicColors, in which their tones must
+ * have a certain distance from each other.
+ *
+ * Prefer a DynamicColor with a background, this is for special cases when
+ * designers want tonal distance, literally contrast, between two colors that
+ * don't have a background / foreground relationship or a contrast guarantee.
+ */
+class ToneDeltaPair {
+    /**
+     * Documents a constraint in tone distance between two DynamicColors.
+     *
+     * The polarity is an adjective that describes "A", compared to "B".
+     *
+     * For instance, ToneDeltaPair(A, B, 15, 'darker', stayTogether) states that
+     * A's tone should be at least 15 darker than B's.
+     *
+     * 'nearer' and 'farther' describes closeness to the surface roles. For
+     * instance, ToneDeltaPair(A, B, 10, 'nearer', stayTogether) states that A
+     * should be 10 lighter than B in light mode, and 10 darker than B in dark
+     * mode.
+     *
+     * @param roleA The first role in a pair.
+     * @param roleB The second role in a pair.
+     * @param delta Required difference between tones. Absolute value, negative
+     * values have undefined behavior.
+     * @param polarity The relative relation between tones of roleA and roleB,
+     * as described above.
+     * @param stayTogether Whether these two roles should stay on the same side of
+     * the "awkward zone" (T50-59). This is necessary for certain cases where
+     * one role has two backgrounds.
+     */
+    constructor(roleA, roleB, delta, polarity, stayTogether) {
+        this.roleA = roleA;
+        this.roleB = roleB;
+        this.delta = delta;
+        this.polarity = polarity;
+        this.stayTogether = stayTogether;
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Set of themes supported by Dynamic Color.
+ * Instantiate the corresponding subclass, ex. SchemeTonalSpot, to create
+ * colors corresponding to the theme.
+ */
+var Variant;
+(function (Variant) {
+    Variant[Variant["MONOCHROME"] = 0] = "MONOCHROME";
+    Variant[Variant["NEUTRAL"] = 1] = "NEUTRAL";
+    Variant[Variant["TONAL_SPOT"] = 2] = "TONAL_SPOT";
+    Variant[Variant["VIBRANT"] = 3] = "VIBRANT";
+    Variant[Variant["EXPRESSIVE"] = 4] = "EXPRESSIVE";
+    Variant[Variant["FIDELITY"] = 5] = "FIDELITY";
+    Variant[Variant["CONTENT"] = 6] = "CONTENT";
+    Variant[Variant["RAINBOW"] = 7] = "RAINBOW";
+    Variant[Variant["FRUIT_SALAD"] = 8] = "FRUIT_SALAD";
+})(Variant || (Variant = {}));
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+function isFidelity(scheme) {
+    return scheme.variant === Variant.FIDELITY ||
+        scheme.variant === Variant.CONTENT;
+}
+function isMonochrome(scheme) {
+    return scheme.variant === Variant.MONOCHROME;
+}
+function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
+    let answer = tone;
+    let closestToChroma = Hct.from(hue, chroma, tone);
+    if (closestToChroma.chroma < chroma) {
+        let chromaPeak = closestToChroma.chroma;
+        while (closestToChroma.chroma < chroma) {
+            answer += byDecreasingTone ? -1 : 1.0;
+            const potentialSolution = Hct.from(hue, chroma, answer);
+            if (chromaPeak > potentialSolution.chroma) {
+                break;
+            }
+            if (Math.abs(potentialSolution.chroma - chroma) < 0.4) {
+                break;
+            }
+            const potentialDelta = Math.abs(potentialSolution.chroma - chroma);
+            const currentDelta = Math.abs(closestToChroma.chroma - chroma);
+            if (potentialDelta < currentDelta) {
+                closestToChroma = potentialSolution;
+            }
+            chromaPeak = Math.max(chromaPeak, potentialSolution.chroma);
+        }
+    }
+    return answer;
+}
+/**
+ * DynamicColors for the colors in the Material Design system.
+ */
+// Material Color Utilities namespaces the various utilities it provides.
+// tslint:disable-next-line:class-as-namespace
+class MaterialDynamicColors {
+    static highestSurface(s) {
+        return s.isDark ? MaterialDynamicColors.surfaceBright :
+            MaterialDynamicColors.surfaceDim;
+    }
+}
+MaterialDynamicColors.contentAccentToneDelta = 15.0;
+MaterialDynamicColors.primaryPaletteKeyColor = DynamicColor.fromPalette({
+    name: 'primary_palette_key_color',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => s.primaryPalette.keyColor.tone,
+});
+MaterialDynamicColors.secondaryPaletteKeyColor = DynamicColor.fromPalette({
+    name: 'secondary_palette_key_color',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => s.secondaryPalette.keyColor.tone,
+});
+MaterialDynamicColors.tertiaryPaletteKeyColor = DynamicColor.fromPalette({
+    name: 'tertiary_palette_key_color',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => s.tertiaryPalette.keyColor.tone,
+});
+MaterialDynamicColors.neutralPaletteKeyColor = DynamicColor.fromPalette({
+    name: 'neutral_palette_key_color',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.neutralPalette.keyColor.tone,
+});
+MaterialDynamicColors.neutralVariantPaletteKeyColor = DynamicColor.fromPalette({
+    name: 'neutral_variant_palette_key_color',
+    palette: (s) => s.neutralVariantPalette,
+    tone: (s) => s.neutralVariantPalette.keyColor.tone,
+});
+MaterialDynamicColors.background = DynamicColor.fromPalette({
+    name: 'background',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? 6 : 98,
+    isBackground: true,
+});
+MaterialDynamicColors.onBackground = DynamicColor.fromPalette({
+    name: 'on_background',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? 90 : 10,
+    background: (s) => MaterialDynamicColors.background,
+    contrastCurve: new ContrastCurve(3, 3, 4.5, 7),
+});
+MaterialDynamicColors.surface = DynamicColor.fromPalette({
+    name: 'surface',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? 6 : 98,
+    isBackground: true,
+});
+MaterialDynamicColors.surfaceDim = DynamicColor.fromPalette({
+    name: 'surface_dim',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? 6 : new ContrastCurve(87, 87, 80, 75).get(s.contrastLevel),
+    isBackground: true,
+});
+MaterialDynamicColors.surfaceBright = DynamicColor.fromPalette({
+    name: 'surface_bright',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? new ContrastCurve(24, 24, 29, 34).get(s.contrastLevel) : 98,
+    isBackground: true,
+});
+MaterialDynamicColors.surfaceContainerLowest = DynamicColor.fromPalette({
+    name: 'surface_container_lowest',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? new ContrastCurve(4, 4, 2, 0).get(s.contrastLevel) : 100,
+    isBackground: true,
+});
+MaterialDynamicColors.surfaceContainerLow = DynamicColor.fromPalette({
+    name: 'surface_container_low',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(10, 10, 11, 12).get(s.contrastLevel) :
+        new ContrastCurve(96, 96, 96, 95).get(s.contrastLevel),
+    isBackground: true,
+});
+MaterialDynamicColors.surfaceContainer = DynamicColor.fromPalette({
+    name: 'surface_container',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(12, 12, 16, 20).get(s.contrastLevel) :
+        new ContrastCurve(94, 94, 92, 90).get(s.contrastLevel),
+    isBackground: true,
+});
+MaterialDynamicColors.surfaceContainerHigh = DynamicColor.fromPalette({
+    name: 'surface_container_high',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(17, 17, 21, 25).get(s.contrastLevel) :
+        new ContrastCurve(92, 92, 88, 85).get(s.contrastLevel),
+    isBackground: true,
+});
+MaterialDynamicColors.surfaceContainerHighest = DynamicColor.fromPalette({
+    name: 'surface_container_highest',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ?
+        new ContrastCurve(22, 22, 26, 30).get(s.contrastLevel) :
+        new ContrastCurve(90, 90, 84, 80).get(s.contrastLevel),
+    isBackground: true,
+});
+MaterialDynamicColors.onSurface = DynamicColor.fromPalette({
+    name: 'on_surface',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? 90 : 10,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.surfaceVariant = DynamicColor.fromPalette({
+    name: 'surface_variant',
+    palette: (s) => s.neutralVariantPalette,
+    tone: (s) => s.isDark ? 30 : 90,
+    isBackground: true,
+});
+MaterialDynamicColors.onSurfaceVariant = DynamicColor.fromPalette({
+    name: 'on_surface_variant',
+    palette: (s) => s.neutralVariantPalette,
+    tone: (s) => s.isDark ? 80 : 30,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+MaterialDynamicColors.inverseSurface = DynamicColor.fromPalette({
+    name: 'inverse_surface',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? 90 : 20,
+});
+MaterialDynamicColors.inverseOnSurface = DynamicColor.fromPalette({
+    name: 'inverse_on_surface',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => s.isDark ? 20 : 95,
+    background: (s) => MaterialDynamicColors.inverseSurface,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.outline = DynamicColor.fromPalette({
+    name: 'outline',
+    palette: (s) => s.neutralVariantPalette,
+    tone: (s) => s.isDark ? 60 : 50,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7),
+});
+MaterialDynamicColors.outlineVariant = DynamicColor.fromPalette({
+    name: 'outline_variant',
+    palette: (s) => s.neutralVariantPalette,
+    tone: (s) => s.isDark ? 30 : 80,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+});
+MaterialDynamicColors.shadow = DynamicColor.fromPalette({
+    name: 'shadow',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => 0,
+});
+MaterialDynamicColors.scrim = DynamicColor.fromPalette({
+    name: 'scrim',
+    palette: (s) => s.neutralPalette,
+    tone: (s) => 0,
+});
+MaterialDynamicColors.surfaceTint = DynamicColor.fromPalette({
+    name: 'surface_tint',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => s.isDark ? 80 : 40,
+    isBackground: true,
+});
+MaterialDynamicColors.primary = DynamicColor.fromPalette({
+    name: 'primary',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 100 : 0;
+        }
+        return s.isDark ? 80 : 40;
+    },
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 10, 'nearer', false),
+});
+MaterialDynamicColors.onPrimary = DynamicColor.fromPalette({
+    name: 'on_primary',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 10 : 90;
+        }
+        return s.isDark ? 20 : 100;
+    },
+    background: (s) => MaterialDynamicColors.primary,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.primaryContainer = DynamicColor.fromPalette({
+    name: 'primary_container',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => {
+        if (isFidelity(s)) {
+            return s.sourceColorHct.tone;
+        }
+        if (isMonochrome(s)) {
+            return s.isDark ? 85 : 25;
+        }
+        return s.isDark ? 30 : 90;
+    },
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 10, 'nearer', false),
+});
+MaterialDynamicColors.onPrimaryContainer = DynamicColor.fromPalette({
+    name: 'on_primary_container',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => {
+        if (isFidelity(s)) {
+            return DynamicColor.foregroundTone(MaterialDynamicColors.primaryContainer.tone(s), 4.5);
+        }
+        if (isMonochrome(s)) {
+            return s.isDark ? 0 : 100;
+        }
+        return s.isDark ? 90 : 30;
+    },
+    background: (s) => MaterialDynamicColors.primaryContainer,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+MaterialDynamicColors.inversePrimary = DynamicColor.fromPalette({
+    name: 'inverse_primary',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => s.isDark ? 40 : 80,
+    background: (s) => MaterialDynamicColors.inverseSurface,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+});
+MaterialDynamicColors.secondary = DynamicColor.fromPalette({
+    name: 'secondary',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => s.isDark ? 80 : 40,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 10, 'nearer', false),
+});
+MaterialDynamicColors.onSecondary = DynamicColor.fromPalette({
+    name: 'on_secondary',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 10 : 100;
+        }
+        else {
+            return s.isDark ? 20 : 100;
+        }
+    },
+    background: (s) => MaterialDynamicColors.secondary,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.secondaryContainer = DynamicColor.fromPalette({
+    name: 'secondary_container',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => {
+        const initialTone = s.isDark ? 30 : 90;
+        if (isMonochrome(s)) {
+            return s.isDark ? 30 : 85;
+        }
+        if (!isFidelity(s)) {
+            return initialTone;
+        }
+        return findDesiredChromaByTone(s.secondaryPalette.hue, s.secondaryPalette.chroma, initialTone, s.isDark ? false : true);
+    },
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 10, 'nearer', false),
+});
+MaterialDynamicColors.onSecondaryContainer = DynamicColor.fromPalette({
+    name: 'on_secondary_container',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 90 : 10;
+        }
+        if (!isFidelity(s)) {
+            return s.isDark ? 90 : 30;
+        }
+        return DynamicColor.foregroundTone(MaterialDynamicColors.secondaryContainer.tone(s), 4.5);
+    },
+    background: (s) => MaterialDynamicColors.secondaryContainer,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+MaterialDynamicColors.tertiary = DynamicColor.fromPalette({
+    name: 'tertiary',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 90 : 25;
+        }
+        return s.isDark ? 80 : 40;
+    },
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 10, 'nearer', false),
+});
+MaterialDynamicColors.onTertiary = DynamicColor.fromPalette({
+    name: 'on_tertiary',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 10 : 90;
+        }
+        return s.isDark ? 20 : 100;
+    },
+    background: (s) => MaterialDynamicColors.tertiary,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.tertiaryContainer = DynamicColor.fromPalette({
+    name: 'tertiary_container',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 60 : 49;
+        }
+        if (!isFidelity(s)) {
+            return s.isDark ? 30 : 90;
+        }
+        const proposedHct = s.tertiaryPalette.getHct(s.sourceColorHct.tone);
+        return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
+    },
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 10, 'nearer', false),
+});
+MaterialDynamicColors.onTertiaryContainer = DynamicColor.fromPalette({
+    name: 'on_tertiary_container',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 0 : 100;
+        }
+        if (!isFidelity(s)) {
+            return s.isDark ? 90 : 30;
+        }
+        return DynamicColor.foregroundTone(MaterialDynamicColors.tertiaryContainer.tone(s), 4.5);
+    },
+    background: (s) => MaterialDynamicColors.tertiaryContainer,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+MaterialDynamicColors.error = DynamicColor.fromPalette({
+    name: 'error',
+    palette: (s) => s.errorPalette,
+    tone: (s) => s.isDark ? 80 : 40,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 7),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 10, 'nearer', false),
+});
+MaterialDynamicColors.onError = DynamicColor.fromPalette({
+    name: 'on_error',
+    palette: (s) => s.errorPalette,
+    tone: (s) => s.isDark ? 20 : 100,
+    background: (s) => MaterialDynamicColors.error,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.errorContainer = DynamicColor.fromPalette({
+    name: 'error_container',
+    palette: (s) => s.errorPalette,
+    tone: (s) => s.isDark ? 30 : 90,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 10, 'nearer', false),
+});
+MaterialDynamicColors.onErrorContainer = DynamicColor.fromPalette({
+    name: 'on_error_container',
+    palette: (s) => s.errorPalette,
+    tone: (s) => {
+        if (isMonochrome(s)) {
+            return s.isDark ? 90 : 10;
+        }
+        return s.isDark ? 90 : 30;
+    },
+    background: (s) => MaterialDynamicColors.errorContainer,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+MaterialDynamicColors.primaryFixed = DynamicColor.fromPalette({
+    name: 'primary_fixed',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => isMonochrome(s) ? 40.0 : 90.0,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, 'lighter', true),
+});
+MaterialDynamicColors.primaryFixedDim = DynamicColor.fromPalette({
+    name: 'primary_fixed_dim',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => isMonochrome(s) ? 30.0 : 80.0,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, 'lighter', true),
+});
+MaterialDynamicColors.onPrimaryFixed = DynamicColor.fromPalette({
+    name: 'on_primary_fixed',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => isMonochrome(s) ? 100.0 : 10.0,
+    background: (s) => MaterialDynamicColors.primaryFixedDim,
+    secondBackground: (s) => MaterialDynamicColors.primaryFixed,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.onPrimaryFixedVariant = DynamicColor.fromPalette({
+    name: 'on_primary_fixed_variant',
+    palette: (s) => s.primaryPalette,
+    tone: (s) => isMonochrome(s) ? 90.0 : 30.0,
+    background: (s) => MaterialDynamicColors.primaryFixedDim,
+    secondBackground: (s) => MaterialDynamicColors.primaryFixed,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+MaterialDynamicColors.secondaryFixed = DynamicColor.fromPalette({
+    name: 'secondary_fixed',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => isMonochrome(s) ? 80.0 : 90.0,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, 'lighter', true),
+});
+MaterialDynamicColors.secondaryFixedDim = DynamicColor.fromPalette({
+    name: 'secondary_fixed_dim',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => isMonochrome(s) ? 70.0 : 80.0,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, 'lighter', true),
+});
+MaterialDynamicColors.onSecondaryFixed = DynamicColor.fromPalette({
+    name: 'on_secondary_fixed',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => 10.0,
+    background: (s) => MaterialDynamicColors.secondaryFixedDim,
+    secondBackground: (s) => MaterialDynamicColors.secondaryFixed,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.onSecondaryFixedVariant = DynamicColor.fromPalette({
+    name: 'on_secondary_fixed_variant',
+    palette: (s) => s.secondaryPalette,
+    tone: (s) => isMonochrome(s) ? 25.0 : 30.0,
+    background: (s) => MaterialDynamicColors.secondaryFixedDim,
+    secondBackground: (s) => MaterialDynamicColors.secondaryFixed,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+MaterialDynamicColors.tertiaryFixed = DynamicColor.fromPalette({
+    name: 'tertiary_fixed',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => isMonochrome(s) ? 40.0 : 90.0,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, 'lighter', true),
+});
+MaterialDynamicColors.tertiaryFixedDim = DynamicColor.fromPalette({
+    name: 'tertiary_fixed_dim',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => isMonochrome(s) ? 30.0 : 80.0,
+    isBackground: true,
+    background: (s) => MaterialDynamicColors.highestSurface(s),
+    contrastCurve: new ContrastCurve(1, 1, 3, 4.5),
+    toneDeltaPair: (s) => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, 'lighter', true),
+});
+MaterialDynamicColors.onTertiaryFixed = DynamicColor.fromPalette({
+    name: 'on_tertiary_fixed',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => isMonochrome(s) ? 100.0 : 10.0,
+    background: (s) => MaterialDynamicColors.tertiaryFixedDim,
+    secondBackground: (s) => MaterialDynamicColors.tertiaryFixed,
+    contrastCurve: new ContrastCurve(4.5, 7, 11, 21),
+});
+MaterialDynamicColors.onTertiaryFixedVariant = DynamicColor.fromPalette({
+    name: 'on_tertiary_fixed_variant',
+    palette: (s) => s.tertiaryPalette,
+    tone: (s) => isMonochrome(s) ? 90.0 : 30.0,
+    background: (s) => MaterialDynamicColors.tertiaryFixedDim,
+    secondBackground: (s) => MaterialDynamicColors.tertiaryFixed,
+    contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+});
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Constructed by a set of values representing the current UI state (such as
+ * whether or not its dark theme, what the theme style is, etc.), and
+ * provides a set of TonalPalettes that can create colors that fit in
+ * with the theme style. Used by DynamicColor to resolve into a color.
+ */
+class DynamicScheme {
+    constructor(args) {
+        this.sourceColorArgb = args.sourceColorArgb;
+        this.variant = args.variant;
+        this.contrastLevel = args.contrastLevel;
+        this.isDark = args.isDark;
+        this.sourceColorHct = Hct.fromInt(args.sourceColorArgb);
+        this.primaryPalette = args.primaryPalette;
+        this.secondaryPalette = args.secondaryPalette;
+        this.tertiaryPalette = args.tertiaryPalette;
+        this.neutralPalette = args.neutralPalette;
+        this.neutralVariantPalette = args.neutralVariantPalette;
+        this.errorPalette = TonalPalette.fromHueAndChroma(25.0, 84.0);
+    }
+    /**
+     * Support design spec'ing Dynamic Color by schemes that specify hue
+     * rotations that should be applied at certain breakpoints.
+     * @param sourceColor the source color of the theme, in HCT.
+     * @param hues The "breakpoints", i.e. the hues at which a rotation should
+     * be apply.
+     * @param rotations The rotation that should be applied when source color's
+     * hue is >= the same index in hues array, and <= the hue at the next index
+     * in hues array.
+     */
+    static getRotatedHue(sourceColor, hues, rotations) {
+        const sourceHue = sourceColor.hue;
+        if (hues.length !== rotations.length) {
+            throw new Error(`mismatch between hue length ${hues.length} & rotations ${rotations.length}`);
+        }
+        if (rotations.length === 1) {
+            return sanitizeDegreesDouble(sourceColor.hue + rotations[0]);
+        }
+        const size = hues.length;
+        for (let i = 0; i <= size - 2; i++) {
+            const thisHue = hues[i];
+            const nextHue = hues[i + 1];
+            if (thisHue < sourceHue && sourceHue < nextHue) {
+                return sanitizeDegreesDouble(sourceHue + rotations[i]);
+            }
+        }
+        // If this statement executes, something is wrong, there should have been a
+        // rotation found using the arrays.
+        return sourceHue;
+    }
+    getArgb(dynamicColor) {
+        return dynamicColor.getArgb(this);
+    }
+    getHct(dynamicColor) {
+        return dynamicColor.getHct(this);
+    }
+    get primaryPaletteKeyColor() {
+        return this.getArgb(MaterialDynamicColors.primaryPaletteKeyColor);
+    }
+    get secondaryPaletteKeyColor() {
+        return this.getArgb(MaterialDynamicColors.secondaryPaletteKeyColor);
+    }
+    get tertiaryPaletteKeyColor() {
+        return this.getArgb(MaterialDynamicColors.tertiaryPaletteKeyColor);
+    }
+    get neutralPaletteKeyColor() {
+        return this.getArgb(MaterialDynamicColors.neutralPaletteKeyColor);
+    }
+    get neutralVariantPaletteKeyColor() {
+        return this.getArgb(MaterialDynamicColors.neutralVariantPaletteKeyColor);
+    }
+    get background() {
+        return this.getArgb(MaterialDynamicColors.background);
+    }
+    get onBackground() {
+        return this.getArgb(MaterialDynamicColors.onBackground);
+    }
+    get surface() {
+        return this.getArgb(MaterialDynamicColors.surface);
+    }
+    get surfaceDim() {
+        return this.getArgb(MaterialDynamicColors.surfaceDim);
+    }
+    get surfaceBright() {
+        return this.getArgb(MaterialDynamicColors.surfaceBright);
+    }
+    get surfaceContainerLowest() {
+        return this.getArgb(MaterialDynamicColors.surfaceContainerLowest);
+    }
+    get surfaceContainerLow() {
+        return this.getArgb(MaterialDynamicColors.surfaceContainerLow);
+    }
+    get surfaceContainer() {
+        return this.getArgb(MaterialDynamicColors.surfaceContainer);
+    }
+    get surfaceContainerHigh() {
+        return this.getArgb(MaterialDynamicColors.surfaceContainerHigh);
+    }
+    get surfaceContainerHighest() {
+        return this.getArgb(MaterialDynamicColors.surfaceContainerHighest);
+    }
+    get onSurface() {
+        return this.getArgb(MaterialDynamicColors.onSurface);
+    }
+    get surfaceVariant() {
+        return this.getArgb(MaterialDynamicColors.surfaceVariant);
+    }
+    get onSurfaceVariant() {
+        return this.getArgb(MaterialDynamicColors.onSurfaceVariant);
+    }
+    get inverseSurface() {
+        return this.getArgb(MaterialDynamicColors.inverseSurface);
+    }
+    get inverseOnSurface() {
+        return this.getArgb(MaterialDynamicColors.inverseOnSurface);
+    }
+    get outline() {
+        return this.getArgb(MaterialDynamicColors.outline);
+    }
+    get outlineVariant() {
+        return this.getArgb(MaterialDynamicColors.outlineVariant);
+    }
+    get shadow() {
+        return this.getArgb(MaterialDynamicColors.shadow);
+    }
+    get scrim() {
+        return this.getArgb(MaterialDynamicColors.scrim);
+    }
+    get surfaceTint() {
+        return this.getArgb(MaterialDynamicColors.surfaceTint);
+    }
+    get primary() {
+        return this.getArgb(MaterialDynamicColors.primary);
+    }
+    get onPrimary() {
+        return this.getArgb(MaterialDynamicColors.onPrimary);
+    }
+    get primaryContainer() {
+        return this.getArgb(MaterialDynamicColors.primaryContainer);
+    }
+    get onPrimaryContainer() {
+        return this.getArgb(MaterialDynamicColors.onPrimaryContainer);
+    }
+    get inversePrimary() {
+        return this.getArgb(MaterialDynamicColors.inversePrimary);
+    }
+    get secondary() {
+        return this.getArgb(MaterialDynamicColors.secondary);
+    }
+    get onSecondary() {
+        return this.getArgb(MaterialDynamicColors.onSecondary);
+    }
+    get secondaryContainer() {
+        return this.getArgb(MaterialDynamicColors.secondaryContainer);
+    }
+    get onSecondaryContainer() {
+        return this.getArgb(MaterialDynamicColors.onSecondaryContainer);
+    }
+    get tertiary() {
+        return this.getArgb(MaterialDynamicColors.tertiary);
+    }
+    get onTertiary() {
+        return this.getArgb(MaterialDynamicColors.onTertiary);
+    }
+    get tertiaryContainer() {
+        return this.getArgb(MaterialDynamicColors.tertiaryContainer);
+    }
+    get onTertiaryContainer() {
+        return this.getArgb(MaterialDynamicColors.onTertiaryContainer);
+    }
+    get error() {
+        return this.getArgb(MaterialDynamicColors.error);
+    }
+    get onError() {
+        return this.getArgb(MaterialDynamicColors.onError);
+    }
+    get errorContainer() {
+        return this.getArgb(MaterialDynamicColors.errorContainer);
+    }
+    get onErrorContainer() {
+        return this.getArgb(MaterialDynamicColors.onErrorContainer);
+    }
+    get primaryFixed() {
+        return this.getArgb(MaterialDynamicColors.primaryFixed);
+    }
+    get primaryFixedDim() {
+        return this.getArgb(MaterialDynamicColors.primaryFixedDim);
+    }
+    get onPrimaryFixed() {
+        return this.getArgb(MaterialDynamicColors.onPrimaryFixed);
+    }
+    get onPrimaryFixedVariant() {
+        return this.getArgb(MaterialDynamicColors.onPrimaryFixedVariant);
+    }
+    get secondaryFixed() {
+        return this.getArgb(MaterialDynamicColors.secondaryFixed);
+    }
+    get secondaryFixedDim() {
+        return this.getArgb(MaterialDynamicColors.secondaryFixedDim);
+    }
+    get onSecondaryFixed() {
+        return this.getArgb(MaterialDynamicColors.onSecondaryFixed);
+    }
+    get onSecondaryFixedVariant() {
+        return this.getArgb(MaterialDynamicColors.onSecondaryFixedVariant);
+    }
+    get tertiaryFixed() {
+        return this.getArgb(MaterialDynamicColors.tertiaryFixed);
+    }
+    get tertiaryFixedDim() {
+        return this.getArgb(MaterialDynamicColors.tertiaryFixedDim);
+    }
+    get onTertiaryFixed() {
+        return this.getArgb(MaterialDynamicColors.onTertiaryFixed);
+    }
+    get onTertiaryFixedVariant() {
+        return this.getArgb(MaterialDynamicColors.onTertiaryFixedVariant);
+    }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * An intermediate concept between the key color for a UI theme, and a full
+ * color scheme. 5 sets of tones are generated, all except one use the same hue
+ * as the key color, and all vary in chroma.
+ */
+class CorePalette {
+    /**
+     * @param argb ARGB representation of a color
+     */
+    static of(argb) {
+        return new CorePalette(argb, false);
+    }
+    /**
+     * @param argb ARGB representation of a color
+     */
+    static contentOf(argb) {
+        return new CorePalette(argb, true);
+    }
+    /**
+     * Create a [CorePalette] from a set of colors
+     */
+    static fromColors(colors) {
+        return CorePalette.createPaletteFromColors(false, colors);
+    }
+    /**
+     * Create a content [CorePalette] from a set of colors
+     */
+    static contentFromColors(colors) {
+        return CorePalette.createPaletteFromColors(true, colors);
+    }
+    static createPaletteFromColors(content, colors) {
+        const palette = new CorePalette(colors.primary, content);
+        if (colors.secondary) {
+            const p = new CorePalette(colors.secondary, content);
+            palette.a2 = p.a1;
+        }
+        if (colors.tertiary) {
+            const p = new CorePalette(colors.tertiary, content);
+            palette.a3 = p.a1;
+        }
+        if (colors.error) {
+            const p = new CorePalette(colors.error, content);
+            palette.error = p.a1;
+        }
+        if (colors.neutral) {
+            const p = new CorePalette(colors.neutral, content);
+            palette.n1 = p.n1;
+        }
+        if (colors.neutralVariant) {
+            const p = new CorePalette(colors.neutralVariant, content);
+            palette.n2 = p.n2;
+        }
+        return palette;
+    }
+    constructor(argb, isContent) {
+        const hct = Hct.fromInt(argb);
+        const hue = hct.hue;
+        const chroma = hct.chroma;
+        if (isContent) {
+            this.a1 = TonalPalette.fromHueAndChroma(hue, chroma);
+            this.a2 = TonalPalette.fromHueAndChroma(hue, chroma / 3);
+            this.a3 = TonalPalette.fromHueAndChroma(hue + 60, chroma / 2);
+            this.n1 = TonalPalette.fromHueAndChroma(hue, Math.min(chroma / 12, 4));
+            this.n2 = TonalPalette.fromHueAndChroma(hue, Math.min(chroma / 6, 8));
+        }
+        else {
+            this.a1 = TonalPalette.fromHueAndChroma(hue, Math.max(48, chroma));
+            this.a2 = TonalPalette.fromHueAndChroma(hue, 16);
+            this.a3 = TonalPalette.fromHueAndChroma(hue + 60, 24);
+            this.n1 = TonalPalette.fromHueAndChroma(hue, 4);
+            this.n2 = TonalPalette.fromHueAndChroma(hue, 8);
+        }
+        this.error = TonalPalette.fromHueAndChroma(25, 84);
+    }
+}
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A Dynamic Color theme that is intentionally detached from the source color.
+ */
+class SchemeExpressive extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.EXPRESSIVE,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 240.0), 40.0),
+            secondaryPalette: TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, SchemeExpressive.hues, SchemeExpressive.secondaryRotations), 24.0),
+            tertiaryPalette: TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, SchemeExpressive.hues, SchemeExpressive.tertiaryRotations), 32.0),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue + 15, 8.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue + 15, 12.0),
+        });
+    }
+}
+/**
+ * Hues (in degrees) used at breakpoints such that designers can specify a
+ * hue rotation that occurs at a given break point.
+ */
+SchemeExpressive.hues = [
+    0.0,
+    21.0,
+    51.0,
+    121.0,
+    151.0,
+    191.0,
+    271.0,
+    321.0,
+    360.0,
+];
+/**
+ * Hue rotations (in degrees) of the Secondary [TonalPalette],
+ * corresponding to the breakpoints in [hues].
+ */
+SchemeExpressive.secondaryRotations = [
+    45.0,
+    95.0,
+    45.0,
+    20.0,
+    45.0,
+    90.0,
+    45.0,
+    45.0,
+    45.0,
+];
+/**
+ * Hue rotations (in degrees) of the Tertiary [TonalPalette],
+ * corresponding to the breakpoints in [hues].
+ */
+SchemeExpressive.tertiaryRotations = [
+    120.0,
+    120.0,
+    20.0,
+    45.0,
+    20.0,
+    15.0,
+    20.0,
+    120.0,
+    120.0,
+];
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * A Dynamic Color theme that maxes out colorfulness at each position in the
+ * Primary Tonal Palette.
+ */
+class SchemeVibrant extends DynamicScheme {
+    constructor(sourceColorHct, isDark, contrastLevel) {
+        super({
+            sourceColorArgb: sourceColorHct.toInt(),
+            variant: Variant.VIBRANT,
+            contrastLevel,
+            isDark,
+            primaryPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 200.0),
+            secondaryPalette: TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, SchemeVibrant.hues, SchemeVibrant.secondaryRotations), 24.0),
+            tertiaryPalette: TonalPalette.fromHueAndChroma(DynamicScheme.getRotatedHue(sourceColorHct, SchemeVibrant.hues, SchemeVibrant.tertiaryRotations), 32.0),
+            neutralPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 10.0),
+            neutralVariantPalette: TonalPalette.fromHueAndChroma(sourceColorHct.hue, 12.0),
+        });
+    }
+}
+/**
+ * Hues (in degrees) used at breakpoints such that designers can specify a
+ * hue rotation that occurs at a given break point.
+ */
+SchemeVibrant.hues = [
+    0.0,
+    41.0,
+    61.0,
+    101.0,
+    131.0,
+    181.0,
+    251.0,
+    301.0,
+    360.0,
+];
+/**
+ * Hue rotations (in degrees) of the Secondary [TonalPalette],
+ * corresponding to the breakpoints in [hues].
+ */
+SchemeVibrant.secondaryRotations = [
+    18.0,
+    15.0,
+    10.0,
+    12.0,
+    15.0,
+    18.0,
+    15.0,
+    12.0,
+    12.0,
+];
+/**
+ * Hue rotations (in degrees) of the Tertiary [TonalPalette],
+ * corresponding to the breakpoints in [hues].
+ */
+SchemeVibrant.tertiaryRotations = [
+    35.0,
+    30.0,
+    20.0,
+    25.0,
+    30.0,
+    35.0,
+    30.0,
+    25.0,
+    25.0,
+];
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Utility methods for hexadecimal representations of colors.
+ */
+/**
+ * @param argb ARGB representation of a color.
+ * @return Hex string representing color, ex. #ff0000 for red.
+ */
+function hexFromArgb(argb) {
+    const r = redFromArgb(argb);
+    const g = greenFromArgb(argb);
+    const b = blueFromArgb(argb);
+    const outParts = [r.toString(16), g.toString(16), b.toString(16)];
+    // Pad single-digit output values
+    for (const [i, part] of outParts.entries()) {
+        if (part.length === 1) {
+            outParts[i] = '0' + part;
+        }
+    }
+    return '#' + outParts.join('');
+}
+/**
+ * @param hex String representing color as hex code. Accepts strings with or
+ *     without leading #, and string representing the color using 3, 6, or 8
+ *     hex characters.
+ * @return ARGB representation of color.
+ */
+function argbFromHex(hex) {
+    hex = hex.replace('#', '');
+    const isThree = hex.length === 3;
+    const isSix = hex.length === 6;
+    const isEight = hex.length === 8;
+    if (!isThree && !isSix && !isEight) {
+        throw new Error('unexpected hex ' + hex);
+    }
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (isThree) {
+        r = parseIntHex(hex.slice(0, 1).repeat(2));
+        g = parseIntHex(hex.slice(1, 2).repeat(2));
+        b = parseIntHex(hex.slice(2, 3).repeat(2));
+    }
+    else if (isSix) {
+        r = parseIntHex(hex.slice(0, 2));
+        g = parseIntHex(hex.slice(2, 4));
+        b = parseIntHex(hex.slice(4, 6));
+    }
+    else if (isEight) {
+        r = parseIntHex(hex.slice(2, 4));
+        g = parseIntHex(hex.slice(4, 6));
+        b = parseIntHex(hex.slice(6, 8));
+    }
+    return (((255 << 24) | ((r & 0x0ff) << 16) | ((g & 0x0ff) << 8) | (b & 0x0ff)) >>>
+        0);
+}
+function parseIntHex(value) {
+    // tslint:disable-next-line:ban
+    return parseInt(value, 16);
+}
+
+var _M3eThemeElement_instances, _M3eThemeElement_styleSheet, _M3eThemeElement_firstUpdated, _M3eThemeElement_light, _M3eThemeElement_dark, _M3eThemeElement_forcedColor, _M3eThemeElement_colorSchemeChangeHandler, _M3eThemeElement_apply, _M3eThemeElement_getVariant, _M3eThemeElement_getContrastLevel;
+/**
+ * @summary
+ * A non-visual element responsible for application-level theming.
+ *
+ * @description
+ * The `m3e-theme` component is a non-visual element used to apply dynamic color, expressive motion, density, and strong focus indicators
+ * to nested, theme-aware elements.
+ *
+ * When `m3e-theme` is nested directly beneath the `<body>` of a document, the `<body>`'s `background-color` is set to the computed
+ * value of `--md-sys-color-background` and `color` is set to the computed value of `--md-sys-color-on-background`. In addition,
+ * the document's `scrollbar-color` is set to the computed values of `--m3e-scrollbar-thumb-color` and `--m3e-scrollbar-track-color` which,
+ * when supported, cascades to all viewport scrollbars.
+ *
+ * @example
+ * The following example adds a top-level `m3e-theme` directly beneath a document's `<body>` element to
+ * apply application-level theming.  In this example, `color` and `scheme` are used to create a dynamic color
+ * palette which automatically adjusts to a user's light or dark color preference. In addition, expressive motion
+ * and strong focus indicators are enabled.
+ *
+ * ```html
+ * <body>
+ *  <m3e-theme color="#7D67BE" scheme="auto" motion="expressive" strong-focus>
+ *      <!-- Normal body content here. -->
+ *  </m3e-theme>
+ * <body/>
+ * ```
+ * @tag m3e-theme
+ *
+ * @attr color - The hex color from which to derive dynamic color palettes.
+ * @attr contrast - The contrast level of the theme.
+ * @attr density - The density scale (0, -1, -2).
+ * @attr scheme - The color scheme of the theme.
+ * @attr strong-focus - Whether to enable strong focus indicators.
+ * @attr variant - The color variant of the theme.
+ *
+ * @fires change - Dispatched when the theme changes.
+ */
+let M3eThemeElement = class M3eThemeElement extends Role(LitElement, "none") {
+    constructor() {
+        super(...arguments);
+        _M3eThemeElement_instances.add(this);
+        /** @private */ _M3eThemeElement_styleSheet.set(this, new CSSStyleSheet());
+        /** @private */ _M3eThemeElement_firstUpdated.set(this, false);
+        /** @private */ _M3eThemeElement_light.set(this, void 0);
+        /** @private */ _M3eThemeElement_dark.set(this, void 0);
+        /** @private */ _M3eThemeElement_forcedColor.set(this, void 0);
+        /** @private */ _M3eThemeElement_colorSchemeChangeHandler.set(this, () => __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_apply).call(this));
+        /**
+         * The hex color from which to derive dynamic color palettes.
+         * @default "#7D67BE"
+         */
+        this.color = "#7D67BE";
+        /**
+         * The color variant of the theme.
+         * @default "vibrant"
+         */
+        this.variant = "vibrant";
+        /**
+         * The color scheme of the theme.
+         * @default "auto"
+         */
+        this.scheme = "auto";
+        /**
+         * The contrast level of the theme.
+         * @default "standard"
+         */
+        this.contrast = "standard";
+        /**
+         * Whether to enable strong focus indicators.
+         * @default false
+         */
+        this.strongFocus = false;
+        /**
+         * The density scale (0, -1, -2).
+         * @default 0
+         */
+        this.density = 0;
+        /** The motion scheme.
+         * @default "standard"
+         */
+        this.motion = "standard";
+    }
+    /** Whether a dark theme is applied. */
+    get isDark() {
+        switch (this.scheme) {
+            case "light":
+                return false;
+            case "dark":
+                return true;
+            default: // auto
+                return __classPrivateFieldGet(this, _M3eThemeElement_dark, "f")?.matches ?? false;
+        }
+    }
+    /** @inheritdoc */
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.shadowRoot && !this.shadowRoot.adoptedStyleSheets.includes(__classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f"))) {
+            this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f")];
+        }
+        __classPrivateFieldSet(this, _M3eThemeElement_light, matchMedia("(prefers-color-scheme: light)"), "f");
+        __classPrivateFieldSet(this, _M3eThemeElement_dark, matchMedia("(prefers-color-scheme: dark)"), "f");
+        __classPrivateFieldSet(this, _M3eThemeElement_forcedColor, matchMedia("(forced-colors: active)"), "f");
+        [__classPrivateFieldGet(this, _M3eThemeElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeElement_dark, "f"), __classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")].forEach((x) => x.addEventListener("change", __classPrivateFieldGet(this, _M3eThemeElement_colorSchemeChangeHandler, "f")));
+    }
+    /** @inheritdoc */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        [__classPrivateFieldGet(this, _M3eThemeElement_light, "f"), __classPrivateFieldGet(this, _M3eThemeElement_dark, "f"), __classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")].forEach((x) => x?.removeEventListener("change", __classPrivateFieldGet(this, _M3eThemeElement_colorSchemeChangeHandler, "f")));
+        __classPrivateFieldSet(this, _M3eThemeElement_light, __classPrivateFieldSet(this, _M3eThemeElement_dark, __classPrivateFieldSet(this, _M3eThemeElement_forcedColor, undefined, "f"), "f"), "f");
+    }
+    /** @inheritdoc */
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_apply).call(this);
+    }
+    /** @inheritdoc */
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        __classPrivateFieldSet(this, _M3eThemeElement_firstUpdated, true, "f");
+    }
+    /** @inheritdoc */
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+_M3eThemeElement_styleSheet = new WeakMap();
+_M3eThemeElement_firstUpdated = new WeakMap();
+_M3eThemeElement_light = new WeakMap();
+_M3eThemeElement_dark = new WeakMap();
+_M3eThemeElement_forcedColor = new WeakMap();
+_M3eThemeElement_colorSchemeChangeHandler = new WeakMap();
+_M3eThemeElement_instances = new WeakSet();
+_M3eThemeElement_apply = function _M3eThemeElement_apply() {
+    const color = argbFromHex(this.color);
+    const palette = CorePalette.of(color);
+    const scheme = new DynamicScheme({
+        sourceColorArgb: color,
+        variant: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getVariant).call(this),
+        contrastLevel: __classPrivateFieldGet(this, _M3eThemeElement_instances, "m", _M3eThemeElement_getContrastLevel).call(this),
+        isDark: this.isDark,
+        primaryPalette: palette.a1,
+        secondaryPalette: palette.a2,
+        tertiaryPalette: palette.a3,
+        neutralPalette: palette.n1,
+        neutralVariantPalette: palette.n2,
+    });
+    let css = "";
+    for (const key in MaterialDynamicColors) {
+        if (!key.endsWith("PaletteKeyColor")) {
+            const dynamicColor = MaterialDynamicColors[key];
+            if (dynamicColor instanceof DynamicColor) {
+                css += `--md-sys-color-${key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}: ${hexFromArgb(dynamicColor.getArgb(scheme))};`;
+            }
+        }
+    }
+    if (this.motion === "expressive") {
+        css += "--md-sys-motion-spring-fast-spatial: 350ms cubic-bezier(0.42, 1.67, 0.21, 0.90);";
+        css += "--md-sys-motion-spring-default-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1.00);";
+        css += "--md-sys-motion-spring-slow-spatial: 650ms cubic-bezier(0.39, 1.29, 0.35, 0.98);";
+        css += "--md-sys-motion-spring-fast-effects: 150ms cubic-bezier(0.31, 0.94, 0.34, 1.00);";
+        css += "--md-sys-motion-spring-default-effects: 200ms cubic-bezier(0.34, 0.80, 0.34, 1.00);";
+        css += "--md-sys-motion-spring-slow-effects: 300ms cubic-bezier(0.34, 0.88, 0.34, 1.00);";
+    }
+    css += `--md-sys-density-scale: ${this.density};`;
+    css += `--m3e-scrollbar-thumb-color: ${hexFromArgb(palette.n1.tone(60))};`;
+    css += `--m3e-focus-ring-visibility: ${this.strongFocus ? "visible" : "hidden"};`;
+    __classPrivateFieldGet(this, _M3eThemeElement_styleSheet, "f").replaceSync(`:host { ${css} }`);
+    if (this.parentElement instanceof HTMLBodyElement) {
+        const computedStyle = getComputedStyle(this);
+        if (__classPrivateFieldGet(this, _M3eThemeElement_forcedColor, "f")?.matches) {
+            this.parentElement.style.backgroundColor =
+                this.parentElement.style.color =
+                    this.parentElement.ownerDocument.documentElement.style.scrollbarColor =
+                        this.parentElement.style.scrollbarColor =
+                            "";
+        }
+        else {
+            this.parentElement.style.backgroundColor = computedStyle.getPropertyValue("--md-sys-color-background");
+            this.parentElement.style.color = computedStyle.getPropertyValue("--md-sys-color-on-background");
+            this.parentElement.ownerDocument.documentElement.style.scrollbarColor =
+                this.parentElement.style.scrollbarColor = `${computedStyle.getPropertyValue("--m3e-scrollbar-thumb-color")} ${computedStyle.getPropertyValue("--m3e-scrollbar-track-color")}`;
+        }
+    }
+    if (__classPrivateFieldGet(this, _M3eThemeElement_firstUpdated, "f")) {
+        this.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+};
+_M3eThemeElement_getVariant = function _M3eThemeElement_getVariant() {
+    switch (this.variant) {
+        case "monochrome":
+            return 0;
+        case "neutral":
+            return 1;
+        case "tonal-spot":
+            return 2;
+        case "vibrant":
+            return 3;
+        case "expressive":
+            return 4;
+        case "fidelity":
+            return 5;
+        case "rainbow":
+            return 7;
+        case "fruit-salad":
+            return 8;
+        default: // content
+            return 6;
+    }
+};
+_M3eThemeElement_getContrastLevel = function _M3eThemeElement_getContrastLevel() {
+    switch (this.contrast) {
+        case "high":
+            return 1;
+        case "medium":
+            return 0.5;
+        default: // standard
+            return 0;
+    }
+};
+/** The styles of the element. */
+M3eThemeElement.styles = css `
+    :host {
+      display: contents;
+      font-size: ${DesignToken.typescale.standard.body.large.fontSize};
+      font-weight: ${DesignToken.typescale.standard.body.large.fontWeight};
+      line-height: ${DesignToken.typescale.standard.body.large.lineHeight};
+      letter-spacing: ${DesignToken.typescale.standard.body.large.tracking};
+    }
+  `;
+__decorate([
+    n()
+], M3eThemeElement.prototype, "color", void 0);
+__decorate([
+    n()
+], M3eThemeElement.prototype, "variant", void 0);
+__decorate([
+    n()
+], M3eThemeElement.prototype, "scheme", void 0);
+__decorate([
+    n()
+], M3eThemeElement.prototype, "contrast", void 0);
+__decorate([
+    n({ attribute: "strong-focus", type: Boolean })
+], M3eThemeElement.prototype, "strongFocus", void 0);
+__decorate([
+    n({ type: Number })
+], M3eThemeElement.prototype, "density", void 0);
+__decorate([
+    n()
+], M3eThemeElement.prototype, "motion", void 0);
+M3eThemeElement = __decorate([
+    t$1("m3e-theme")
+], M3eThemeElement);
+
+export { M3eThemeElement };
+//# sourceMappingURL=index.js.map