@cds/core 5.6.2 → 6.0.0-beta.1

package/test-dropdown/test-dropdown.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"test-dropdown.element.js","sources":["../../../src/test-dropdown/test-dropdown.element.ts"],"sourcesContent":null,"names":["CdsTestDropdown","LitElement","[object Object]","super","arguments","this","_open","title","open","value","old","requestUpdate","openChange","emit","styles","baseStyles","html","toggle","I18nService","keys","dropdown","__decorate","event","prototype","property","type","Boolean","String"],"mappings":"uNA6BO,MAAMA,UAAwBC,EACjCC,cACIC,SAASC,WACTC,KAAKC,OAAQ,EAEbD,KAAKE,MAAQ,WAEjBC,WACI,OAAOH,KAAKC,MAGhBE,SAASC,GACL,GAAIA,IAAUJ,KAAKC,MAAO,CACtB,MAAMI,EAAML,KAAKC,MACjBD,KAAKC,MAAQG,EACbJ,KAAKM,cAAc,OAAQD,GAC3BL,KAAKO,WAAWC,KAAKR,KAAKG,OAGlCM,oBACI,MAAO,CAACC,EAAYD,GAExBZ,SACI,OAAOc,CAAK,yCAEM,IAAMX,KAAKY,yBAAyBZ,KAAKE,kBACzDF,KAAKG,KACDQ,CAAK,QACHE,EAAYC,KAAKC,SAASZ,0BAG5B,WAKVN,SACIG,KAAKG,MAAQH,KAAKG,MAG1Ba,EAAW,CACPC,KACDtB,EAAgBuB,UAAW,kBAAc,GAC5CF,EAAW,CACPG,EAAS,CAAEC,KAAMC,WAClB1B,EAAgBuB,UAAW,OAAQ,MACtCF,EAAW,CACPG,EAAS,CAAEC,KAAME,UAClB3B,EAAgBuB,UAAW,aAAS"}
+{"version":3,"file":"test-dropdown.element.js","sources":["../../../src/test-dropdown/test-dropdown.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { baseStyles, I18nService, event, property } from '@cds/core/internal';\nimport { html, LitElement } from 'lit';\nimport styles from './test-dropdown.element.scss';\n/**\n * Dropdown, example test component. Do not use in production.\n *\n * ```typescript\n * import '@cds/core/test-dropdown';\n * ```\n *\n * ```html\n * <cds-test-dropdown label=\"click me!\">\n *   Hello World\n * </cds-test-dropdown>\n * ```\n *\n * @slot - Content slot for dropdown content\n * @event {boolean} openChange - notify open state change of dropdown\n * @cssprop --border-color\n * @cssprop --background-color\n * @cssprop --text-color\n */\nexport class CdsTestDropdown extends LitElement {\n    constructor() {\n        super(...arguments);\n        this._open = false;\n        /** Set the dropdown button text */\n        this.label = 'dropdown';\n    }\n    get open() {\n        return this._open;\n    }\n    /** Set open to open or close the dropdown */\n    set open(value) {\n        if (value !== this._open) {\n            const old = this._open;\n            this._open = value;\n            this.requestUpdate('open', old);\n            this.openChange.emit(this.open);\n        }\n    }\n    static get styles() {\n        return [baseStyles, styles];\n    }\n    render() {\n        return html `\n      <div class=\"dropdown\">\n        <button @click=\"${() => this.toggle()}\" class=\"btn\">${this.label}</button>\n        ${this.open\n            ? html ` <div>\n              ${I18nService.keys.dropdown.open}\n              <slot></slot>\n            </div>`\n            : ''}\n      </div>\n    `;\n    }\n    /** Toggle the current open state of the dropdown */\n    toggle() {\n        this.open = !this.open;\n    }\n}\n__decorate([\n    event()\n], CdsTestDropdown.prototype, \"openChange\", void 0);\n__decorate([\n    property({ type: Boolean })\n], CdsTestDropdown.prototype, \"open\", null);\n__decorate([\n    property({ type: String })\n], CdsTestDropdown.prototype, \"label\", void 0);\n"],"names":["CdsTestDropdown","LitElement","constructor","super","this","_open","label","open","value","old","requestUpdate","openChange","emit","styles","baseStyles","render","html","toggle","I18nService","keys","dropdown","__decorate","event","prototype","property","type","Boolean","String"],"mappings":"uNA4BO,MAAMA,UAAwBC,EACjCC,cACIC,oBACAC,KAAKC,OAAQ,EAEbD,KAAKE,MAAQ,WAEbC,WACA,OAAOH,KAAKC,MAGZE,SAAKC,GACL,GAAIA,IAAUJ,KAAKC,MAAO,CACtB,MAAMI,EAAML,KAAKC,MACjBD,KAAKC,MAAQG,EACbJ,KAAKM,cAAc,OAAQD,GAC3BL,KAAKO,WAAWC,KAAKR,KAAKG,OAGvBM,oBACP,MAAO,CAACC,EAAYD,GAExBE,SACI,OAAOC,CAAK,yCAEM,IAAMZ,KAAKa,yBAAyBb,KAAKE,kBACzDF,KAAKG,KACDS,CAAK,QACHE,EAAYC,KAAKC,SAASb,0BAG5B,WAKVU,SACIb,KAAKG,MAAQH,KAAKG,MAG1Bc,EAAW,CACPC,KACDtB,EAAgBuB,UAAW,kBAAc,GAC5CF,EAAW,CACPG,EAAS,CAAEC,KAAMC,WAClB1B,EAAgBuB,UAAW,OAAQ,MACtCF,EAAW,CACPG,EAAS,CAAEC,KAAME,UAClB3B,EAAgBuB,UAAW,aAAS"}

package/test-dropdown/test-dropdown.element.scss.js

@@ -1,2 +1,2 @@
-import{css as r}from"lit";var o=r`:host{font-family:inherit;font-size:inherit;color:inherit;--border-color:hsl(0, 0%, 80%);--background:hsl(0, 0%, 80%);--color:hsl(0, 0%, 18%)}.dropdown div{border:1px solid var(--border-color);padding:.5rem;color:inherit;font-size:.75rem}.dropdown .btn{background:var(--background);color:var(--color);border-radius:.25rem;padding:.5rem;font-family:inherit;font-size:1rem;cursor:pointer;height:auto}`;export default o;
+import{css as r}from"lit";var o=r`:host{font-family:inherit;font-size:inherit;color:inherit;--border-color:hsl(0, 0%, 80%);--background:hsl(0, 0%, 80%);--color:hsl(0, 0%, 18%)}.dropdown div{border:1px solid var(--border-color);padding:.5rem;color:inherit;font-size:.75rem}.dropdown .btn{background:var(--background);color:var(--color);border-radius:.25rem;padding:.5rem;font-family:inherit;font-size:1rem;cursor:pointer;height:auto}`;export{o as default};
 //# sourceMappingURL=test-dropdown.element.scss.js.map

package/test-dropdown/test-dropdown.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"test-dropdown.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"test-dropdown.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/textarea/index.js

@@ -1,2 +1,2 @@
-export{CdsTextarea}from"./textarea.element.js";import"@cds/core/forms";
+export{CdsTextarea}from"./textarea.element.js";
 //# sourceMappingURL=index.js.map

package/textarea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/textarea/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/textarea/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsTextarea"],"mappings":"mJAQAA,EAAsB,eAAgBC"}
+{"version":3,"file":"register.js","sources":["../../../src/textarea/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { registerElementSafely } from '@cds/core/internal';\nimport { CdsTextarea } from './textarea.element.js';\nimport '@cds/core/forms/register.js';\nregisterElementSafely('cds-textarea', CdsTextarea);\n"],"names":["registerElementSafely","CdsTextarea"],"mappings":"mJAQAA,EAAsB,eAAgBC"}

package/textarea/textarea.element.js

@@ -1,2 +1,2 @@
-import{CdsControl as s}from"@cds/core/forms";import t from"./textarea.element.scss.js";class e extends s{constructor(){super(...arguments),this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,t]}}export{e as CdsTextarea};
+import{CdsControl as s}from"@cds/core/forms";import t from"./textarea.element.scss.js";class e extends s{constructor(){super(...arguments);this.supportsPrefixSuffixActions=!1}static get styles(){return[...super.styles,t]}}export{e as CdsTextarea};
 //# sourceMappingURL=textarea.element.js.map

package/textarea/textarea.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.element.js","sources":["../../../src/textarea/textarea.element.ts"],"sourcesContent":null,"names":["CdsTextarea","CdsControl","[object Object]","super","arguments","this","supportsPrefixSuffixActions","styles"],"mappings":"uFA8BO,MAAMA,UAAoBC,EAC7BC,cACIC,SAASC,WACTC,KAAKC,6BAA8B,EAEvCC,oBACI,MAAO,IAAIJ,MAAMI,OAAQA"}
+{"version":3,"file":"textarea.element.js","sources":["../../../src/textarea/textarea.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { CdsControl } from '@cds/core/forms';\nimport styles from './textarea.element.scss';\n/**\n * Form\n *\n * ```typescript\n * import '@cds/core/textarea/register.js';\n * ```\n *\n * ```html\n * <cds-textarea>\n *   <label>textarea</label>\n *   <textarea></textarea>\n *   <cds-control-message>message text</cds-control-message>\n * </cds-textarea>\n * ```\n * @element cds-textarea\n * @slot - For projecting cds-inputs\n * @cssprop --background\n * @cssprop --border\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --border-radius\n */\nexport class CdsTextarea extends CdsControl {\n    constructor() {\n        super(...arguments);\n        this.supportsPrefixSuffixActions = false;\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n}\n"],"names":["CdsTextarea","CdsControl","constructor","super","this","supportsPrefixSuffixActions","styles"],"mappings":"uFA8BO,MAAMA,UAAoBC,EAC7BC,cACIC,oBACAC,KAAKC,6BAA8B,EAE5BC,oBACP,MAAO,IAAIH,MAAMG,OAAQA"}

package/textarea/textarea.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-space-5, calc((8 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem));--font-size:var(--cds-global-typography-font-size-3, calc((13 / var(--cds-global-base, 20)) * 1rem));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--border-radius:var(--cds-alias-object-border-radius-100, calc((4 / var(--cds-global-base, 20)) * 1rem));display:block;width:100%}::slotted(textarea){background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;resize:vertical!important;width:100%!important;min-height:var(--cds-global-layout-space-xxl,calc((96 / var(--cds-global-base,20)) * 1rem))!important}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export default r;
+import{css as r}from"lit";var a=r`:host{--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-space-5, 0.5rem) var(--cds-global-space-6, 0.75rem);--font-size:var(--cds-global-typography-font-size-3, 0.8125rem);--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--border-radius:var(--cds-alias-object-border-radius-100, 0.25rem);display:block;width:100%}::slotted(textarea){background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;resize:vertical!important;width:100%!important;min-height:var(--cds-global-space-15,6rem)!important}:host([status=error]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, 0.0625rem) solid var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export{a as default};
 //# sourceMappingURL=textarea.element.scss.js.map

package/textarea/textarea.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"textarea.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/time/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/time/register.d.ts

@@ -1,5 +1,6 @@
 import { CdsTime } from './time.element.js';
 import '@cds/core/forms/register.js';
+import '@cds/core/button-action/register.js';
 import '@cds/core/icon/register.js';
 declare global {
     interface HTMLElementTagNameMap {

package/time/register.js

@@ -1,2 +1,2 @@
-import{registerElementSafely as r}from"@cds/core/internal";import{CdsTime as e}from"./time.element.js";import"@cds/core/forms/register.js";import"@cds/core/icon/register.js";r("cds-time",e);
+import{registerElementSafely as o}from"@cds/core/internal";import{CdsTime as r}from"./time.element.js";import"@cds/core/forms/register.js";import"@cds/core/button-action/register.js";import"@cds/core/icon/register.js";import{ClarityIcons as c}from"@cds/core/icon/icon.service.js";import{clockIcon as e}from"@cds/core/icon/shapes/clock.js";c.addIcons(e),o("cds-time",r);
 //# sourceMappingURL=register.js.map

package/time/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/time/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsTime"],"mappings":"8KASAA,EAAsB,WAAYC"}
+{"version":3,"file":"register.js","sources":["../../../src/time/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { registerElementSafely } from '@cds/core/internal';\nimport { CdsTime } from './time.element.js';\nimport '@cds/core/forms/register.js';\nimport '@cds/core/button-action/register.js';\nimport '@cds/core/icon/register.js';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { clockIcon } from '@cds/core/icon/shapes/clock.js';\nClarityIcons.addIcons(clockIcon);\nregisterElementSafely('cds-time', CdsTime);\n"],"names":["ClarityIcons","addIcons","clockIcon","registerElementSafely","CdsTime"],"mappings":"mVAYAA,EAAaC,SAASC,GACtBC,EAAsB,WAAYC"}

package/time/time.element.d.ts

@@ -31,5 +31,4 @@ export declare class CdsTime extends CdsControl {
     protected globalStyles: import("lit").CSSResultGroup;
     protected get suffixDefaultTemplate(): import("lit-html").TemplateResult<1>;
     static get styles(): import("lit").CSSResultGroup[];
-    constructor();
 }

package/time/time.element.js

@@ -1,2 +1,2 @@
-import{__decorate as o}from"tslib";import{html as r}from"lit";import{globalStyle as s}from"@cds/core/internal";import{CdsControl as t}from"@cds/core/forms";import{inputStyles as c}from"@cds/core/input";import{ClarityIcons as e}from"@cds/core/icon/icon.service.js";import{clockIcon as i}from"@cds/core/icon/shapes/clock.js";import l from"./time.global.scss.js";class m extends t{constructor(){super(),this.globalStyles=l,e.addIcons(i)}get suffixDefaultTemplate(){return r`<cds-control-action readonly="readonly"><cds-icon shape="clock" size="18"></cds-icon></cds-control-action>`}static get styles(){return[...super.styles,c]}}o([s()],m.prototype,"globalStyles",void 0);export{m as CdsTime};
+import{__decorate as t}from"tslib";import{html as o}from"lit";import{globalStyle as r}from"@cds/core/internal";import{CdsControl as s}from"@cds/core/forms";import{inputStyles as e}from"@cds/core/input";import l from"./time.global.scss.js";class c extends s{constructor(){super(...arguments);this.globalStyles=l}get suffixDefaultTemplate(){return o`<cds-button-action shape="clock" readonly="readonly"></cds-button-action>`}static get styles(){return[...super.styles,e]}}t([r()],c.prototype,"globalStyles",void 0);export{c as CdsTime};
 //# sourceMappingURL=time.element.js.map

package/time/time.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.element.js","sources":["../../../src/time/time.element.ts"],"sourcesContent":null,"names":["CdsTime","CdsControl","[object Object]","super","this","globalStyles","ClarityIcons","addIcons","clockIcon","suffixDefaultTemplate","html","styles","inputStyles","__decorate","globalStyle","prototype"],"mappings":"wWAyCO,MAAMA,UAAgBC,EACzBC,cACIC,QACAC,KAAKC,aAAeA,EACpBC,EAAaC,SAASC,GAE1BC,4BACI,OAAOC,CAAK,6GAEhBC,oBACI,MAAO,IAAIR,MAAMQ,OAAQC,IAGjCC,EAAW,CACPC,KACDd,EAAQe,UAAW,oBAAgB"}
+{"version":3,"file":"time.element.js","sources":["../../../src/time/time.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { globalStyle } from '@cds/core/internal';\nimport { CdsControl } from '@cds/core/forms';\nimport { inputStyles } from '@cds/core/input';\nimport globalStyles from './time.global.scss';\n/**\n * Time Input\n *\n * ```typescript\n * import '@cds/core/time/register.js';\n * ```\n *\n * ```html\n * <cds-time>\n *   <label>time</label>\n *   <input type=\"time\" />\n *   <cds-control-message>message text</cds-control-message>\n * </cds-time>\n * ```\n *\n * @element cds-time\n * @slot - For projecting time input and label\n * @cssprop --background\n * @cssprop --background-size\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --outline\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --line-height\n * @cssprop --transition\n */\nexport class CdsTime extends CdsControl {\n    constructor() {\n        super(...arguments);\n        this.globalStyles = globalStyles;\n    }\n    get suffixDefaultTemplate() {\n        return html `<cds-button-action shape=\"clock\" readonly></cds-button-action>`;\n    }\n    static get styles() {\n        return [...super.styles, inputStyles];\n    }\n}\n__decorate([\n    globalStyle()\n], CdsTime.prototype, \"globalStyles\", void 0);\n"],"names":["CdsTime","CdsControl","constructor","super","this","globalStyles","suffixDefaultTemplate","html","styles","inputStyles","__decorate","globalStyle","prototype"],"mappings":"+OAuCO,MAAMA,UAAgBC,EACzBC,cACIC,oBACAC,KAAKC,aAAeA,EAEpBC,4BACA,OAAOC,CAAK,4EAELC,oBACP,MAAO,IAAIL,MAAMK,OAAQC,IAGjCC,EAAW,CACPC,KACDX,EAAQY,UAAW,oBAAgB"}

package/time/time.global.scss.js

@@ -1,2 +1,2 @@
-import{css as t}from"lit";var e=t`cds-time input[type=time]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;color:transparent;background:0 0;z-index:99}cds-time input[type=time]::-webkit-clear-button{display:none}cds-time input[type=time]::-ms-clear{display:none}`;export default e;
+import{css as t}from"lit";var e=t`cds-time input[type=time]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;right:0;bottom:0;width:auto;height:auto;color:transparent;background:0 0;z-index:99}cds-time input[type=time]::-webkit-clear-button{display:none}cds-time input[type=time]::-ms-clear{display:none}`;export{e as default};
 //# sourceMappingURL=time.global.scss.js.map

package/time/time.global.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.global.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"time.global.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/toggle/index.js

@@ -1,2 +1,2 @@
-export{CdsToggle}from"./toggle.element.js";export{CdsToggleGroup}from"./toggle-group.element.js";import"@cds/core/forms";
+export{CdsToggle}from"./toggle.element.js";export{CdsToggleGroup}from"./toggle-group.element.js";
 //# sourceMappingURL=index.js.map

package/toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/toggle/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/toggle/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsToggle","CdsToggleGroup"],"mappings":"0MASAA,EAAsB,aAAcC,GACpCD,EAAsB,mBAAoBE"}
+{"version":3,"file":"register.js","sources":["../../../src/toggle/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { registerElementSafely } from '@cds/core/internal';\nimport { CdsToggleGroup } from './toggle-group.element.js';\nimport { CdsToggle } from './toggle.element.js';\nimport '@cds/core/forms/register.js';\nregisterElementSafely('cds-toggle', CdsToggle);\nregisterElementSafely('cds-toggle-group', CdsToggleGroup);\n"],"names":["registerElementSafely","CdsToggle","CdsToggleGroup"],"mappings":"0MASAA,EAAsB,aAAcC,GACpCD,EAAsB,mBAAoBE"}

package/toggle/toggle-group.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.element.js","sources":["../../../src/toggle/toggle-group.element.ts"],"sourcesContent":null,"names":["CdsToggleGroup","CdsInternalControlGroup"],"mappings":"0DA+BO,MAAMA,UAAuBC"}
+{"version":3,"file":"toggle-group.element.js","sources":["../../../src/toggle/toggle-group.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { CdsInternalControlGroup } from '@cds/core/forms';\n/**\n * Toggle Group\n *\n * ```typescript\n * import '@cds/core/toggle/register.js';\n * ```\n *\n * ```html\n * <cds-toggle-group>\n *   <label>Select an item</label>\n *   <cds-toggle>\n *     <label>toggle</label>\n *     <input type=\"checkbox\" />\n *   </cds-toggle>\n *\n *   <cds-toggle>\n *     <label>toggle</label>\n *     <input type=\"checkbox\" />\n *   </cds-toggle>\n * </cds-toggle-group>\n * ```\n *\n * @element cds-toggle-group\n * @slot - For projecting toggle controls\n */\nexport class CdsToggleGroup extends CdsInternalControlGroup {\n}\n"],"names":["CdsToggleGroup","CdsInternalControlGroup"],"mappings":"0DA+BO,MAAMA,UAAuBC"}

package/toggle/toggle.element.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from 'lit';
 import { CdsInternalControlInline } from '@cds/core/forms';
 /**
  * Toggle
@@ -28,6 +29,6 @@ import { CdsInternalControlInline } from '@cds/core/forms';
  */
 export declare class CdsToggle extends CdsInternalControlInline {
     cdsMotion: string;
-    updated(props: Map<string, any>): Promise<void>;
+    updated(props: PropertyValues<this>): Promise<void>;
     static get styles(): import("lit").CSSResultGroup[];
 }

package/toggle/toggle.element.js

@@ -1,2 +1,2 @@
-import{__decorate as t}from"tslib";import{property as o}from"@cds/core/internal";import{CdsInternalControlInline as s}from"@cds/core/forms";import e from"./toggle.element.scss.js";class r extends s{constructor(){super(...arguments),this.cdsMotion="on"}async updated(t){super.updated(t),t.has("cdsMotion")&&"on"===this.cdsMotion&&(await this.updateComplete,this.cdsMotion="ready")}static get styles(){return[...super.styles,e]}}t([o({type:String})],r.prototype,"cdsMotion",void 0);export{r as CdsToggle};
+import{__decorate as t}from"tslib";import{property as o}from"@cds/core/internal";import{CdsInternalControlInline as s}from"@cds/core/forms";import e from"./toggle.element.scss.js";class r extends s{constructor(){super(...arguments);this.cdsMotion="on"}async updated(t){super.updated(t),t.has("cdsMotion")&&"on"===this.cdsMotion&&(await this.updateComplete,this.cdsMotion="ready")}static get styles(){return[...super.styles,e]}}t([o({type:String})],r.prototype,"cdsMotion",void 0);export{r as CdsToggle};
 //# sourceMappingURL=toggle.element.js.map

package/toggle/toggle.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.element.js","sources":["../../../src/toggle/toggle.element.ts"],"sourcesContent":null,"names":["CdsToggle","CdsInternalControlInline","[object Object]","super","arguments","this","cdsMotion","props","updated","has","updateComplete","styles","__decorate","property","type","String","prototype"],"mappings":"oLAoCO,MAAMA,UAAkBC,EAC3BC,cACIC,SAASC,WACTC,KAAKC,UAAY,KAErBJ,cAAcK,GACVJ,MAAMK,QAAQD,GAIVA,EAAME,IAAI,cAAmC,OAAnBJ,KAAKC,kBACzBD,KAAKK,eACXL,KAAKC,UAAY,SAGzBK,oBACI,MAAO,IAAIR,MAAMQ,OAAQA,IAGjCC,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBf,EAAUgB,UAAW,iBAAa"}
+{"version":3,"file":"toggle.element.js","sources":["../../../src/toggle/toggle.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { property } from '@cds/core/internal';\nimport { CdsInternalControlInline } from '@cds/core/forms';\nimport styles from './toggle.element.scss';\n/**\n * Toggle\n *\n * ```typescript\n * import '@cds/core/toggle/register.js';\n * ```\n *\n * ```html\n * <cds-toggle>\n *   <label>Toggle</label>\n *   <input type=\"checkbox\" />\n * </cds-toggle>\n * ```\n *\n * @element cds-toggle\n * @slot - For projecting checkbox\n * @cssprop --background\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --anchor-background\n * @cssprop --anchor-border-radius\n * @cssprop --anchor-width\n * @cssprop --anchor-height\n * @cssprop --toggle-speed\n */\nexport class CdsToggle extends CdsInternalControlInline {\n    constructor() {\n        super(...arguments);\n        this.cdsMotion = 'on';\n    }\n    async updated(props) {\n        super.updated(props);\n        // this section fixes an issue with toggles animating when the page loads\n        // note that setting cdsMotion to 'off' will turn off all animation\n        // https://github.com/vmware/clarity/issues/5880\n        if (props.has('cdsMotion') && this.cdsMotion === 'on') {\n            await this.updateComplete;\n            this.cdsMotion = 'ready';\n        }\n    }\n    static get styles() {\n        return [...super.styles, styles];\n    }\n}\n__decorate([\n    property({ type: String })\n], CdsToggle.prototype, \"cdsMotion\", void 0);\n"],"names":["CdsToggle","CdsInternalControlInline","constructor","super","this","cdsMotion","async","props","updated","has","updateComplete","styles","__decorate","property","type","String","prototype"],"mappings":"oLAoCO,MAAMA,UAAkBC,EAC3BC,cACIC,oBACAC,KAAKC,UAAY,KAErBC,cAAcC,GACVJ,MAAMK,QAAQD,GAIVA,EAAME,IAAI,cAAmC,OAAnBL,KAAKC,kBACzBD,KAAKM,eACXN,KAAKC,UAAY,SAGdM,oBACP,MAAO,IAAIR,MAAMQ,OAAQA,IAGjCC,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBf,EAAUgB,UAAW,iBAAa"}

package/toggle/toggle.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border:var(--cds-alias-object-border-width-200, calc((2 / var(--cds-global-base, 20)) * 1rem)) solid var(--background);--border-radius:var(--cds-alias-object-border-radius-200, calc((12 / var(--cds-global-base, 20)) * 1rem));--height:var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem));--width:calc(var(--cds-global-space-10, calc((32 / var(--cds-global-base, 20)) * 1rem)) + var(--cds-global-space-1, calc((1 / var(--cds-global-base, 20)) * 1rem)));--anchor-background:var(--cds-global-color-construction-50, #f1f6f8);--anchor-border-radius:var(--cds-alias-object-border-radius-200, calc((12 / var(--cds-global-base, 20)) * 1rem));--anchor-width:calc(var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem)) + var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)));--anchor-height:calc(var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem)) + var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)));--toggle-speed:var(--cds-global-animation-duration-quicker, 0.15s)}.input,.input:after{display:inline-block;transition-duration:var(--toggle-speed,.15s);transition-timing-function:ease-in}.input{border-radius:var(--border-radius);border:var(--border);background:var(--background);height:var(--height);width:var(--width);position:relative;cursor:pointer;transition-property:border-color,background-color}.input:after{border-radius:var(--anchor-border-radius);background:var(--anchor-background);height:var(--anchor-height);width:var(--anchor-width);position:absolute;content:"";left:0;top:0;transition-property:transform}:host(:not([cds-motion=ready])){--toggle-speed:0}:host([_checked]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--border:var(--cds-alias-object-border-width-200, calc((2 / var(--cds-global-base, 20)) * 1rem)) solid var(--background)}:host([_checked]) .input:after{transform:translate(calc(var(--cds-global-space-7,calc((16 / var(--cds-global-base,20)) * 1rem)) - var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem))),0)}:host([_disabled]) .input{opacity:.6;cursor:not-allowed}[focusable]{width:var(--width);left:0}`;export default r;
+import{css as r}from"lit";var a=r`:host{--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border:var(--cds-alias-object-border-width-200, 0.125rem) solid var(--background);--border-radius:var(--cds-alias-object-border-radius-200, 0.75rem);--height:var(--cds-global-space-8, 1.125rem);--width:calc(var(--cds-global-space-10, 2rem) + var(--cds-global-space-1, 0.0625rem));--anchor-background:var(--cds-global-color-construction-50, #f1f6f8);--anchor-border-radius:var(--cds-alias-object-border-radius-200, 0.75rem);--anchor-width:calc(var(--cds-global-space-6, 0.75rem) + var(--cds-global-space-2, 0.125rem));--anchor-height:calc(var(--cds-global-space-6, 0.75rem) + var(--cds-global-space-2, 0.125rem));--toggle-speed:var(--cds-global-animation-duration-quicker, 0.15s)}.input,.input:after{display:inline-block;transition-duration:var(--toggle-speed,.15s);transition-timing-function:ease-in}.input{border-radius:var(--border-radius);border:var(--border);background:var(--background);height:var(--height);width:var(--width);position:relative;cursor:pointer;transition-property:border-color,background-color}.input:after{border-radius:var(--anchor-border-radius);background:var(--anchor-background);height:var(--anchor-height);width:var(--anchor-width);position:absolute;content:"";left:0;top:0;transition-property:transform}:host(:not([cds-motion=ready])){--toggle-speed:0}:host([_checked]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--border:var(--cds-alias-object-border-width-200, 0.125rem) solid var(--background)}:host([_checked]) .input:after{transform:translate(calc(var(--cds-global-space-7,1rem) - var(--cds-global-space-1,.0625rem)),0)}:host([_disabled]) .input{opacity:.6;cursor:not-allowed}[focusable]{width:var(--width);left:0}`;export{a as default};
 //# sourceMappingURL=toggle.element.scss.js.map

package/toggle/toggle.element.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
+{"version":3,"file":"toggle.element.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/tokens/tokens.android.xml

@@ -1,19 +1,25 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--This token format is currently experimental and may change in the future-->
 <resources>
-  <dimen name="globalLayoutSpaceXxs">2dp</dimen>
-  <dimen name="globalLayoutSpaceXs">4dp</dimen>
-  <dimen name="globalLayoutSpaceSm">6dp</dimen>
-  <dimen name="globalLayoutSpaceMd">12dp</dimen>
-  <dimen name="globalLayoutSpaceLg">24dp</dimen>
-  <dimen name="globalLayoutSpaceXl">48dp</dimen>
-  <dimen name="globalLayoutSpaceXxl">96dp</dimen>
+  <property name="globalBase">20</property>
+  <dimen name="globalScaleSpace">1dp</dimen>
+  <dimen name="globalScaleLayoutSpace">1dp</dimen>
+  <property name="globalScaleTypography">1</property>
   <dimen name="globalLayoutGridCols">12dp</dimen>
   <dimen name="globalLayoutWidthXs">576pxdp</dimen>
   <dimen name="globalLayoutWidthSm">768pxdp</dimen>
   <dimen name="globalLayoutWidthMd">992pxdp</dimen>
   <dimen name="globalLayoutWidthLg">1200pxdp</dimen>
   <dimen name="globalLayoutWidthXl">1440pxdp</dimen>
+  <dimen name="globalLayoutSpaceXxxs">2dp</dimen>
+  <dimen name="globalLayoutSpaceXxs">4dp</dimen>
+  <dimen name="globalLayoutSpaceXs">8dp</dimen>
+  <dimen name="globalLayoutSpaceSm">12dp</dimen>
+  <dimen name="globalLayoutSpaceMd">16dp</dimen>
+  <dimen name="globalLayoutSpaceLg">24dp</dimen>
+  <dimen name="globalLayoutSpaceXl">32dp</dimen>
+  <dimen name="globalLayoutSpaceXxl">48dp</dimen>
+  <dimen name="globalLayoutSpaceXxxl">64dp</dimen>
   <dimen name="globalSpace0">0dp</dimen>
   <dimen name="globalSpace1">1dp</dimen>
   <dimen name="globalSpace2">2dp</dimen>
@@ -27,7 +33,9 @@
   <dimen name="globalSpace10">32dp</dimen>
   <dimen name="globalSpace11">36dp</dimen>
   <dimen name="globalSpace12">48dp</dimen>
-  <dimen name="globalSpace13">72dp</dimen>
+  <dimen name="globalSpace13">64dp</dimen>
+  <dimen name="globalSpace14">72dp</dimen>
+  <dimen name="globalSpace15">96dp</dimen>
   <color name="globalColorBlack">#000000</color>
   <color name="globalColorWhite">#ffffff</color>
   <color name="globalColorGreen50">#eefce3</color>
@@ -140,6 +148,17 @@
   <color name="globalColorYellow800">#855800</color>
   <color name="globalColorYellow900">#5c3d00</color>
   <color name="globalColorYellow1000">#422c00</color>
+  <color name="globalColorLime50">#fcffe0</color>
+  <color name="globalColorLime100">#f5fdaa</color>
+  <color name="globalColorLime200">#e7f471</color>
+  <color name="globalColorLime300">#d8ea3e</color>
+  <color name="globalColorLime400">#c9dc18</color>
+  <color name="globalColorLime500">#b4c70a</color>
+  <color name="globalColorLime600">#9eae09</color>
+  <color name="globalColorLime700">#818f00</color>
+  <color name="globalColorLime800">#657000</color>
+  <color name="globalColorLime900">#373d00</color>
+  <color name="globalColorLime1000">#202400</color>
   <color name="globalColorTangerine50">#fff0e5</color>
   <color name="globalColorTangerine100">#ffdbc2</color>
   <color name="globalColorTangerine200">#fcbe92</color>
@@ -272,8 +291,6 @@
   <property name="globalTypographyFontSize7">24</property>
   <property name="globalTypographyFontSize8">32</property>
   <property name="globalTypographyFontSize9">40</property>
-  <property name="globalTypographyBaseFontSize">125%</property>
-  <property name="globalTypographyBaseFontSizePx">20</property>
   <property name="globalTypographyFontFamily">'Clarity City', 'Avenir Next', sans-serif</property>
   <property name="globalTypographyHeaderFontFamily">'Clarity City', 'Avenir Next', sans-serif</property>
   <property name="globalTypographyMonospaceFontFamily">ui-monospace, Consolas, Menlo, Monaco, monospace</property>
@@ -336,7 +353,6 @@
   <property name="globalAnimationEasingPrimary">cubic-bezier(0,.99,0,.99)</property>
   <property name="globalAnimationEasingSecondary">cubic-bezier(0, 1.5, 0.5, 1)</property>
   <property name="globalAnimationEasingLoop">cubic-bezier(0.17, 0.4, 0.8, 0.79)</property>
-  <property name="globalBase">20</property>
   <property name="aliasObjectBorderRadius100">4</property>
   <property name="aliasObjectBorderRadius200">12</property>
   <property name="aliasObjectBorderRadius300">50%</property>
@@ -347,9 +363,9 @@
   <color name="aliasObjectBorderColor" alias="globalColorConstruction200">#cbd4d8</color>
   <color name="aliasObjectBorderColorTint" alias="globalColorConstruction100">#e3eaed</color>
   <color name="aliasObjectBorderColorShade" alias="globalColorConstruction300">#aeb8bc</color>
-  <property name="aliasObjectShadow100">0 1px 3px 0 hsla(198, 30%, 15%, 0.5)</property>
-  <property name="aliasObjectShadow200">0 1px 3px 0 hsla(198, 30%, 15%, 0.3)</property>
-  <property name="aliasObjectShadow300">0 1px 3px 0 hsla(198, 30%, 15%, 0.2)</property>
+  <property name="aliasObjectShadow100">0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5)</property>
+  <property name="aliasObjectShadow200">0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3)</property>
+  <property name="aliasObjectShadow300">0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2)</property>
   <property name="aliasObjectOpacity0">hsla(0, 0%, 0%, 0)</property>
   <property name="aliasObjectOpacity100">hsla(0, 0%, 0%, 0.2)</property>
   <property name="aliasObjectOpacity200">hsla(0, 0%, 0%, 0.4)</property>
@@ -400,4 +416,7 @@
   <color name="aliasStatusAlt" alias="globalColorViolet700">#7c12a5</color>
   <color name="aliasStatusAltTint" alias="globalColorViolet600">#9b32c8</color>
   <color name="aliasStatusAltShade" alias="globalColorViolet900">#440061</color>
+  <property name="internalScale1">calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space))</property>
+  <property name="internalScale2">calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space))</property>
+  <property name="internalScale3">calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography))</property>
 </resources>

package/tokens/tokens.d.ts

@@ -1,3 +1,14 @@
+export declare const globalBase = "var(--cds-global-base)";
+export declare const globalScaleSpace = "var(--cds-global-scale-space)";
+export declare const globalScaleLayoutSpace = "var(--cds-global-scale-layout-space)";
+export declare const globalScaleTypography = "var(--cds-global-scale-typography)";
+export declare const globalLayoutGridCols = "var(--cds-global-layout-grid-cols)";
+export declare const globalLayoutWidthXs = "var(--cds-global-layout-width-xs)";
+export declare const globalLayoutWidthSm = "var(--cds-global-layout-width-sm)";
+export declare const globalLayoutWidthMd = "var(--cds-global-layout-width-md)";
+export declare const globalLayoutWidthLg = "var(--cds-global-layout-width-lg)";
+export declare const globalLayoutWidthXl = "var(--cds-global-layout-width-xl)";
+export declare const globalLayoutSpaceXxxs = "var(--cds-global-layout-space-xxxs)";
 export declare const globalLayoutSpaceXxs = "var(--cds-global-layout-space-xxs)";
 export declare const globalLayoutSpaceXs = "var(--cds-global-layout-space-xs)";
 export declare const globalLayoutSpaceSm = "var(--cds-global-layout-space-sm)";
@@ -5,12 +16,7 @@ export declare const globalLayoutSpaceMd = "var(--cds-global-layout-space-md)";
 export declare const globalLayoutSpaceLg = "var(--cds-global-layout-space-lg)";
 export declare const globalLayoutSpaceXl = "var(--cds-global-layout-space-xl)";
 export declare const globalLayoutSpaceXxl = "var(--cds-global-layout-space-xxl)";
-export declare const globalLayoutGridCols = "var(--cds-global-layout-grid-cols)";
-export declare const globalLayoutWidthXs = "var(--cds-global-layout-width-xs)";
-export declare const globalLayoutWidthSm = "var(--cds-global-layout-width-sm)";
-export declare const globalLayoutWidthMd = "var(--cds-global-layout-width-md)";
-export declare const globalLayoutWidthLg = "var(--cds-global-layout-width-lg)";
-export declare const globalLayoutWidthXl = "var(--cds-global-layout-width-xl)";
+export declare const globalLayoutSpaceXxxl = "var(--cds-global-layout-space-xxxl)";
 export declare const globalSpace0 = "var(--cds-global-space-0)";
 export declare const globalSpace1 = "var(--cds-global-space-1)";
 export declare const globalSpace2 = "var(--cds-global-space-2)";
@@ -25,6 +31,8 @@ export declare const globalSpace10 = "var(--cds-global-space-10)";
 export declare const globalSpace11 = "var(--cds-global-space-11)";
 export declare const globalSpace12 = "var(--cds-global-space-12)";
 export declare const globalSpace13 = "var(--cds-global-space-13)";
+export declare const globalSpace14 = "var(--cds-global-space-14)";
+export declare const globalSpace15 = "var(--cds-global-space-15)";
 export declare const globalColorBlack = "var(--cds-global-color-black)";
 export declare const globalColorWhite = "var(--cds-global-color-white)";
 export declare const globalColorGreen50 = "var(--cds-global-color-green-50)";
@@ -137,6 +145,17 @@ export declare const globalColorYellow700 = "var(--cds-global-color-yellow-700)"
 export declare const globalColorYellow800 = "var(--cds-global-color-yellow-800)";
 export declare const globalColorYellow900 = "var(--cds-global-color-yellow-900)";
 export declare const globalColorYellow1000 = "var(--cds-global-color-yellow-1000)";
+export declare const globalColorLime50 = "var(--cds-global-color-lime-50)";
+export declare const globalColorLime100 = "var(--cds-global-color-lime-100)";
+export declare const globalColorLime200 = "var(--cds-global-color-lime-200)";
+export declare const globalColorLime300 = "var(--cds-global-color-lime-300)";
+export declare const globalColorLime400 = "var(--cds-global-color-lime-400)";
+export declare const globalColorLime500 = "var(--cds-global-color-lime-500)";
+export declare const globalColorLime600 = "var(--cds-global-color-lime-600)";
+export declare const globalColorLime700 = "var(--cds-global-color-lime-700)";
+export declare const globalColorLime800 = "var(--cds-global-color-lime-800)";
+export declare const globalColorLime900 = "var(--cds-global-color-lime-900)";
+export declare const globalColorLime1000 = "var(--cds-global-color-lime-1000)";
 export declare const globalColorTangerine50 = "var(--cds-global-color-tangerine-50)";
 export declare const globalColorTangerine100 = "var(--cds-global-color-tangerine-100)";
 export declare const globalColorTangerine200 = "var(--cds-global-color-tangerine-200)";
@@ -269,8 +288,6 @@ export declare const globalTypographyFontSize6 = "var(--cds-global-typography-fo
 export declare const globalTypographyFontSize7 = "var(--cds-global-typography-font-size-7)";
 export declare const globalTypographyFontSize8 = "var(--cds-global-typography-font-size-8)";
 export declare const globalTypographyFontSize9 = "var(--cds-global-typography-font-size-9)";
-export declare const globalTypographyBaseFontSize = "var(--cds-global-typography-base-font-size)";
-export declare const globalTypographyBaseFontSizePx = "var(--cds-global-typography-base-font-size-px)";
 export declare const globalTypographyFontFamily = "var(--cds-global-typography-font-family)";
 export declare const globalTypographyHeaderFontFamily = "var(--cds-global-typography-header-font-family)";
 export declare const globalTypographyMonospaceFontFamily = "var(--cds-global-typography-monospace-font-family)";
@@ -333,7 +350,6 @@ export declare const globalAnimationDurationSlowest = "var(--cds-global-animatio
 export declare const globalAnimationEasingPrimary = "var(--cds-global-animation-easing-primary)";
 export declare const globalAnimationEasingSecondary = "var(--cds-global-animation-easing-secondary)";
 export declare const globalAnimationEasingLoop = "var(--cds-global-animation-easing-loop)";
-export declare const globalBase = "var(--cds-global-base)";
 export declare const aliasObjectBorderRadius100 = "var(--cds-alias-object-border-radius-100)";
 export declare const aliasObjectBorderRadius200 = "var(--cds-alias-object-border-radius-200)";
 export declare const aliasObjectBorderRadius300 = "var(--cds-alias-object-border-radius-300)";
@@ -397,3 +413,6 @@ export declare const aliasStatusDisabledShade = "var(--cds-alias-status-disabled
 export declare const aliasStatusAlt = "var(--cds-alias-status-alt)";
 export declare const aliasStatusAltTint = "var(--cds-alias-status-alt-tint)";
 export declare const aliasStatusAltShade = "var(--cds-alias-status-alt-shade)";
+export declare const internalScale1 = "var(--cds-internal-scale-1)";
+export declare const internalScale2 = "var(--cds-internal-scale-2)";
+export declare const internalScale3 = "var(--cds-internal-scale-3)";

package/tokens/tokens.ios.swift

@@ -1,17 +1,23 @@
 // This token format is currently experimental and may change in the future
-let globalLayoutSpaceXxs = CGFloat(2.00);
-let globalLayoutSpaceXs = CGFloat(4.00);
-let globalLayoutSpaceSm = CGFloat(6.00);
-let globalLayoutSpaceMd = CGFloat(12.00);
-let globalLayoutSpaceLg = CGFloat(24.00);
-let globalLayoutSpaceXl = CGFloat(48.00);
-let globalLayoutSpaceXxl = CGFloat(96.00);
+let globalBase = CGFloat(20.00);
+let globalScaleSpace = CGFloat(1.00);
+let globalScaleLayoutSpace = CGFloat(1.00);
+let globalScaleTypography = CGFloat(1.00);
 let globalLayoutGridCols = CGFloat(12.00);
 let globalLayoutWidthXs = "576px";
 let globalLayoutWidthSm = "768px";
 let globalLayoutWidthMd = "992px";
 let globalLayoutWidthLg = "1200px";
 let globalLayoutWidthXl = "1440px";
+let globalLayoutSpaceXxxs = CGFloat(2.00);
+let globalLayoutSpaceXxs = CGFloat(4.00);
+let globalLayoutSpaceXs = CGFloat(8.00);
+let globalLayoutSpaceSm = CGFloat(12.00);
+let globalLayoutSpaceMd = CGFloat(16.00);
+let globalLayoutSpaceLg = CGFloat(24.00);
+let globalLayoutSpaceXl = CGFloat(32.00);
+let globalLayoutSpaceXxl = CGFloat(48.00);
+let globalLayoutSpaceXxxl = CGFloat(64.00);
 let globalSpace0 = CGFloat(0.00);
 let globalSpace1 = CGFloat(1.00);
 let globalSpace2 = CGFloat(2.00);
@@ -25,7 +31,9 @@ let globalSpace9 = CGFloat(24.00);
 let globalSpace10 = CGFloat(32.00);
 let globalSpace11 = CGFloat(36.00);
 let globalSpace12 = CGFloat(48.00);
-let globalSpace13 = CGFloat(72.00);
+let globalSpace13 = CGFloat(64.00);
+let globalSpace14 = CGFloat(72.00);
+let globalSpace15 = CGFloat(96.00);
 let globalColorBlack = UIColor(red: 0, green: 0, blue: 0, alpha: 1.0);
 let globalColorWhite = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0);
 let globalColorGreen50 = UIColor(red: 238, green: 252, blue: 227, alpha: 1.0);
@@ -138,6 +146,17 @@ let globalColorYellow700 = UIColor(red: 179, green: 119, blue: 0, alpha: 1.0);
 let globalColorYellow800 = UIColor(red: 133, green: 88, blue: 0, alpha: 1.0);
 let globalColorYellow900 = UIColor(red: 92, green: 61, blue: 0, alpha: 1.0);
 let globalColorYellow1000 = UIColor(red: 66, green: 44, blue: 0, alpha: 1.0);
+let globalColorLime50 = UIColor(red: 252, green: 255, blue: 224, alpha: 1.0);
+let globalColorLime100 = UIColor(red: 245, green: 253, blue: 170, alpha: 1.0);
+let globalColorLime200 = UIColor(red: 231, green: 244, blue: 113, alpha: 1.0);
+let globalColorLime300 = UIColor(red: 216, green: 234, blue: 62, alpha: 1.0);
+let globalColorLime400 = UIColor(red: 201, green: 220, blue: 24, alpha: 1.0);
+let globalColorLime500 = UIColor(red: 180, green: 199, blue: 10, alpha: 1.0);
+let globalColorLime600 = UIColor(red: 158, green: 174, blue: 9, alpha: 1.0);
+let globalColorLime700 = UIColor(red: 129, green: 143, blue: 0, alpha: 1.0);
+let globalColorLime800 = UIColor(red: 101, green: 112, blue: 0, alpha: 1.0);
+let globalColorLime900 = UIColor(red: 55, green: 61, blue: 0, alpha: 1.0);
+let globalColorLime1000 = UIColor(red: 32, green: 36, blue: 0, alpha: 1.0);
 let globalColorTangerine50 = UIColor(red: 255, green: 240, blue: 229, alpha: 1.0);
 let globalColorTangerine100 = UIColor(red: 255, green: 219, blue: 194, alpha: 1.0);
 let globalColorTangerine200 = UIColor(red: 252, green: 190, blue: 146, alpha: 1.0);
@@ -270,8 +289,6 @@ let globalTypographyFontSize6 = CGFloat(20.00);
 let globalTypographyFontSize7 = CGFloat(24.00);
 let globalTypographyFontSize8 = CGFloat(32.00);
 let globalTypographyFontSize9 = CGFloat(40.00);
-let globalTypographyBaseFontSize = "125%";
-let globalTypographyBaseFontSizePx = CGFloat(20.00);
 let globalTypographyFontFamily = "'Clarity City', 'Avenir Next', sans-serif";
 let globalTypographyHeaderFontFamily = "'Clarity City', 'Avenir Next', sans-serif";
 let globalTypographyMonospaceFontFamily = "ui-monospace, Consolas, Menlo, Monaco, monospace";
@@ -334,7 +351,6 @@ let globalAnimationDurationSlowest = "0.8s";
 let globalAnimationEasingPrimary = "cubic-bezier(0,.99,0,.99)";
 let globalAnimationEasingSecondary = "cubic-bezier(0, 1.5, 0.5, 1)";
 let globalAnimationEasingLoop = "cubic-bezier(0.17, 0.4, 0.8, 0.79)";
-let globalBase = CGFloat(20.00);
 let aliasObjectBorderRadius100 = CGFloat(4.00);
 let aliasObjectBorderRadius200 = CGFloat(12.00);
 let aliasObjectBorderRadius300 = "50%";
@@ -345,9 +361,9 @@ let aliasObjectBorderWidth400 = CGFloat(4.00);
 let aliasObjectBorderColor = UIColor(red: 203, green: 212, blue: 216, alpha: 1.0);
 let aliasObjectBorderColorTint = UIColor(red: 227, green: 234, blue: 237, alpha: 1.0);
 let aliasObjectBorderColorShade = UIColor(red: 174, green: 184, blue: 188, alpha: 1.0);
-let aliasObjectShadow100 = "0 1px 3px 0 hsla(198, 30%, 15%, 0.5)";
-let aliasObjectShadow200 = "0 1px 3px 0 hsla(198, 30%, 15%, 0.3)";
-let aliasObjectShadow300 = "0 1px 3px 0 hsla(198, 30%, 15%, 0.2)";
+let aliasObjectShadow100 = "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5)";
+let aliasObjectShadow200 = "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3)";
+let aliasObjectShadow300 = "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2)";
 let aliasObjectOpacity0 = "hsla(0, 0%, 0%, 0)";
 let aliasObjectOpacity100 = "hsla(0, 0%, 0%, 0.2)";
 let aliasObjectOpacity200 = "hsla(0, 0%, 0%, 0.4)";
@@ -397,4 +413,7 @@ let aliasStatusDisabledTint = UIColor(red: 203, green: 212, blue: 216, alpha: 1.
 let aliasStatusDisabledShade = UIColor(red: 133, green: 147, blue: 153, alpha: 1.0);
 let aliasStatusAlt = UIColor(red: 124, green: 18, blue: 165, alpha: 1.0);
 let aliasStatusAltTint = UIColor(red: 155, green: 50, blue: 200, alpha: 1.0);
-let aliasStatusAltShade = UIColor(red: 68, green: 0, blue: 97, alpha: 1.0);
+let aliasStatusAltShade = UIColor(red: 68, green: 0, blue: 97, alpha: 1.0);
+let internalScale1 = "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space))";
+let internalScale2 = "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space))";
+let internalScale3 = "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography))";

package/tokens/tokens.js

@@ -1,4 +1,15 @@
 // This token format is currently experimental and may change in the future
+export const globalBase = 'var(--cds-global-base)';
+export const globalScaleSpace = 'var(--cds-global-scale-space)';
+export const globalScaleLayoutSpace = 'var(--cds-global-scale-layout-space)';
+export const globalScaleTypography = 'var(--cds-global-scale-typography)';
+export const globalLayoutGridCols = 'var(--cds-global-layout-grid-cols)';
+export const globalLayoutWidthXs = 'var(--cds-global-layout-width-xs)';
+export const globalLayoutWidthSm = 'var(--cds-global-layout-width-sm)';
+export const globalLayoutWidthMd = 'var(--cds-global-layout-width-md)';
+export const globalLayoutWidthLg = 'var(--cds-global-layout-width-lg)';
+export const globalLayoutWidthXl = 'var(--cds-global-layout-width-xl)';
+export const globalLayoutSpaceXxxs = 'var(--cds-global-layout-space-xxxs)';
 export const globalLayoutSpaceXxs = 'var(--cds-global-layout-space-xxs)';
 export const globalLayoutSpaceXs = 'var(--cds-global-layout-space-xs)';
 export const globalLayoutSpaceSm = 'var(--cds-global-layout-space-sm)';
@@ -6,12 +17,7 @@ export const globalLayoutSpaceMd = 'var(--cds-global-layout-space-md)';
 export const globalLayoutSpaceLg = 'var(--cds-global-layout-space-lg)';
 export const globalLayoutSpaceXl = 'var(--cds-global-layout-space-xl)';
 export const globalLayoutSpaceXxl = 'var(--cds-global-layout-space-xxl)';
-export const globalLayoutGridCols = 'var(--cds-global-layout-grid-cols)';
-export const globalLayoutWidthXs = 'var(--cds-global-layout-width-xs)';
-export const globalLayoutWidthSm = 'var(--cds-global-layout-width-sm)';
-export const globalLayoutWidthMd = 'var(--cds-global-layout-width-md)';
-export const globalLayoutWidthLg = 'var(--cds-global-layout-width-lg)';
-export const globalLayoutWidthXl = 'var(--cds-global-layout-width-xl)';
+export const globalLayoutSpaceXxxl = 'var(--cds-global-layout-space-xxxl)';
 export const globalSpace0 = 'var(--cds-global-space-0)';
 export const globalSpace1 = 'var(--cds-global-space-1)';
 export const globalSpace2 = 'var(--cds-global-space-2)';
@@ -26,6 +32,8 @@ export const globalSpace10 = 'var(--cds-global-space-10)';
 export const globalSpace11 = 'var(--cds-global-space-11)';
 export const globalSpace12 = 'var(--cds-global-space-12)';
 export const globalSpace13 = 'var(--cds-global-space-13)';
+export const globalSpace14 = 'var(--cds-global-space-14)';
+export const globalSpace15 = 'var(--cds-global-space-15)';
 export const globalColorBlack = 'var(--cds-global-color-black)';
 export const globalColorWhite = 'var(--cds-global-color-white)';
 export const globalColorGreen50 = 'var(--cds-global-color-green-50)';
@@ -138,6 +146,17 @@ export const globalColorYellow700 = 'var(--cds-global-color-yellow-700)';
 export const globalColorYellow800 = 'var(--cds-global-color-yellow-800)';
 export const globalColorYellow900 = 'var(--cds-global-color-yellow-900)';
 export const globalColorYellow1000 = 'var(--cds-global-color-yellow-1000)';
+export const globalColorLime50 = 'var(--cds-global-color-lime-50)';
+export const globalColorLime100 = 'var(--cds-global-color-lime-100)';
+export const globalColorLime200 = 'var(--cds-global-color-lime-200)';
+export const globalColorLime300 = 'var(--cds-global-color-lime-300)';
+export const globalColorLime400 = 'var(--cds-global-color-lime-400)';
+export const globalColorLime500 = 'var(--cds-global-color-lime-500)';
+export const globalColorLime600 = 'var(--cds-global-color-lime-600)';
+export const globalColorLime700 = 'var(--cds-global-color-lime-700)';
+export const globalColorLime800 = 'var(--cds-global-color-lime-800)';
+export const globalColorLime900 = 'var(--cds-global-color-lime-900)';
+export const globalColorLime1000 = 'var(--cds-global-color-lime-1000)';
 export const globalColorTangerine50 = 'var(--cds-global-color-tangerine-50)';
 export const globalColorTangerine100 = 'var(--cds-global-color-tangerine-100)';
 export const globalColorTangerine200 = 'var(--cds-global-color-tangerine-200)';
@@ -270,8 +289,6 @@ export const globalTypographyFontSize6 = 'var(--cds-global-typography-font-size-
 export const globalTypographyFontSize7 = 'var(--cds-global-typography-font-size-7)';
 export const globalTypographyFontSize8 = 'var(--cds-global-typography-font-size-8)';
 export const globalTypographyFontSize9 = 'var(--cds-global-typography-font-size-9)';
-export const globalTypographyBaseFontSize = 'var(--cds-global-typography-base-font-size)';
-export const globalTypographyBaseFontSizePx = 'var(--cds-global-typography-base-font-size-px)';
 export const globalTypographyFontFamily = 'var(--cds-global-typography-font-family)';
 export const globalTypographyHeaderFontFamily = 'var(--cds-global-typography-header-font-family)';
 export const globalTypographyMonospaceFontFamily = 'var(--cds-global-typography-monospace-font-family)';
@@ -334,7 +351,6 @@ export const globalAnimationDurationSlowest = 'var(--cds-global-animation-durati
 export const globalAnimationEasingPrimary = 'var(--cds-global-animation-easing-primary)';
 export const globalAnimationEasingSecondary = 'var(--cds-global-animation-easing-secondary)';
 export const globalAnimationEasingLoop = 'var(--cds-global-animation-easing-loop)';
-export const globalBase = 'var(--cds-global-base)';
 export const aliasObjectBorderRadius100 = 'var(--cds-alias-object-border-radius-100)';
 export const aliasObjectBorderRadius200 = 'var(--cds-alias-object-border-radius-200)';
 export const aliasObjectBorderRadius300 = 'var(--cds-alias-object-border-radius-300)';
@@ -397,4 +413,7 @@ export const aliasStatusDisabledTint = 'var(--cds-alias-status-disabled-tint)';
 export const aliasStatusDisabledShade = 'var(--cds-alias-status-disabled-shade)';
 export const aliasStatusAlt = 'var(--cds-alias-status-alt)';
 export const aliasStatusAltTint = 'var(--cds-alias-status-alt-tint)';
-export const aliasStatusAltShade = 'var(--cds-alias-status-alt-shade)';
+export const aliasStatusAltShade = 'var(--cds-alias-status-alt-shade)';
+export const internalScale1 = 'var(--cds-internal-scale-1)';
+export const internalScale2 = 'var(--cds-internal-scale-2)';
+export const internalScale3 = 'var(--cds-internal-scale-3)';