scu-web-components 0.0.36 → 0.0.38

package/dist/scw-textarea/scw-textarea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/scw-textarea/scss/scw-textarea.scss", "../../src/scw-textarea/scw-textarea.ts"],
-  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n  display: block;\n}\n\n.input-field {\n  width: 100%;\n  position: relative;\n}\n.input-field .placeholder {\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color-grey);\n  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.8) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.8) calc(var(--scw-spacing-1) * 1.5));\n  z-index: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.input-field .placeholder[scw-hide] {\n  display: none;\n}\n.input-field textarea {\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color-grey-02);\n  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.8) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.8) calc(var(--scw-spacing-1) * 1.5));\n  resize: vertical;\n  width: 100%;\n  min-height: var(--scw-min-height, 56px);\n  box-sizing: border-box;\n  border: 0;\n  background-color: rgba(0, 0, 0, 0);\n  z-index: 2;\n  position: relative;\n}\n.input-field textarea:focus {\n  outline: none;\n}\n\n:host([aria-disabled=true]) textarea {\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color-grey-07);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL3Njb3R0cm91c2UvV29ya3NwYWNlL3NjdS13ZWItY29tcG9uZW50cy13ZWJzaXRlcy9zY3Utd2ViLWNvbXBvbmVudHMtd2Vic2l0ZXMvc3JjL3Njdy10ZXh0YXJlYS9zY3NzIiwic291cmNlcyI6WyJzY3ctdGV4dGFyZWEuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LWlucHV0LXRleHQtYmFzZS9fcGxhY2Vob2xkZXItdGV4dC1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LWlucHV0LXRleHQtYmFzZS9fZGVmYXVsdC10ZXh0LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctaW5wdXQtdGV4dC1iYXNlL19kaXNhYmxlZC10ZXh0LW1peGlucy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1BO0VBQ0U7OztBQUlGO0VBQ0U7RUFDQTs7QUFFQTtFQ1RBO0VBQ0E7RUFJRTtFRE9BO0VBUUE7RUFDQTtFQUNBO0VBRUE7RUFDQTtFQUFROztBQUVSO0VBQ0U7O0FBSUo7RUVoQ0E7RUFDQTtFQUlFO0VGOEJBO0VBUUE7RUFFQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNFOzs7QUFNSjtFRzdEQTtFQUNBO0VBSUUifQ== */`;\n", "import {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport {property} from 'lit/decorators.js';\nimport ScwFormComponent from '../scw-form-component/scw-form-component';\nimport {Components} from '../utils/enums/Components';\nimport styles from './scss/scw-textarea.scss';\nimport {InputTypes} from '../scw-input-field/inputTypes';\nimport {emit} from '../utils/events/event';\nimport {ScwEvents} from '../utils/events/event';\nimport getSuffix from '../utils/suffix';\nimport {\n  AutoCaptializeValues,\n  AutoCompleteValues,\n  AutoCorrectValues,\n} from '../utils/formEnums';\n\n/**\n * ScwTextarea\n * @class\n * @tag scw-textarea\n *\n * @cssprop --scw-input-padding - the padding around text within the textarea\n * @cssprop --scw-min-height - minimum height of the textarea\n * @event scw-focus input recieved focus\n * @event scw-blur input lost focus\n * @event scw-value-change value has changed (not necessarily value displayed)\n *\n */\nexport default class ScwTextarea extends ScwFormComponent {\n  /**\n  * styles\n  */\n  static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  /** constructor */\n  constructor() {\n    super();\n    this.element = Components.textarea;\n\n    const suffix = getSuffix();\n    this.scwInputLayout = unsafeStatic(\n        `scw-${Components.inputLayout}${suffix}`,\n    );\n  }\n\n  // ============== ScwTextarea ================================================\n  /** scw-single-input-layout with versioning suffix */\n  scwInputLayout : any;\n\n  /** (ScwTextareaField) type of input field */\n  @property({type: InputTypes})\n    type: InputTypes = InputTypes.text;\n\n  /** (ScwTextareaField) automatically capitalize input */\n  @property({type: AutoCaptializeValues, attribute: 'autocapitalize'})\n    autoCapitalize: AutoCaptializeValues = AutoCaptializeValues.default;\n\n  /** (ScwTextareaField) automatically completes input */\n  @property({type: AutoCompleteValues, attribute: 'autocomplete'})\n    autoComplete: AutoCompleteValues = AutoCompleteValues.default;\n\n  /** (ScwTextareaField) automatically correct input */\n  @property({type: AutoCorrectValues, attribute: 'autocorrect'})\n    autoCorrect: AutoCorrectValues = AutoCorrectValues.default;\n\n  /** (ScwTextareaField) automatically focus input */\n  @property({type: Boolean, attribute: 'autofocus'})\n    autoFocus = false;\n\n  /**\n  * handle focus into input\n  */\n  _focusHandler() {\n    this.focused = true;\n    emit(\n        ScwEvents.focus,\n        this,\n    );\n  }\n\n  /**\n  * handle blurs from input\n  */\n  _blurHandler() {\n    this.focused = false;\n    this.validate();\n    emit(\n        ScwEvents.blur,\n        this,\n    );\n  }\n\n  /**\n  * handle changes from input\n  * @param {CustomEvent} evt\n  */\n  _valueChangeHandler(evt: Event) {\n    if (evt.target ) {\n      this.value = ( evt.target as unknown as HTMLTextAreaElement ).value;\n      emit(\n          ScwEvents.valueChange,\n          this,\n      );\n    }\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return html`\n      <${this.scwInputLayout}\n        .label=\"${this.ariaLabel}\"\n        .feedback=\"${this.feedback}\"\n        aria-disabled=${this.ariaDisabled === 'true' ? 'true' : 'false'}\n        ?focused=${this.focused}\n        ?invalid=${this.invalid}>\n        <div \n          class=\"input-field\">\n          <textarea\n            ?disabled=${this.ariaDisabled === 'true' ? true : false}\n            autocapitalize=${this.autoCapitalize}\n            autocomplete=${this.autoComplete}\n            autocorrect=${this.autoCorrect}\n            ?autofocus=${this.autoFocus}\n            ?readonly=${this.readOnly}\n            @focus=${this._focusHandler}\n            @blur=${this._blurHandler}\n            @input=${this._valueChangeHandler}\n            .value=${this.value}></textarea>\n          <div \n            class=\"placeholder\"\n            ?scw-hide=${this.value ? true : false}>\n            ${this.placeholder}\n          </div>\n        </div>\n      </${this.scwInputLayout}>\n      <slot name=\"validation\"></slot>\n    `;\n  }\n}\n"],
-  "mappings": "o5BACA,IAAOA,EAAQC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;65BC2Bf,IAAqBC,EAArB,cAAyCC,CAAiB,CAYxD,aAAc,CACZ,MAAM,EAeN,iBAIA,2BAIA,uBAIA,uBAIA,eAAY,GA9BZ,KAAK,mBAEL,IAAMC,EAASC,EAAU,EACzB,KAAK,eAAiBC,EAClB,wBAAgCF,GACpC,CACF,CAhBA,WAAW,QAAS,CAClB,MAAO,CACL,MAAM,OACNG,CACF,CACF,CAwCA,eAAgB,CACd,KAAK,QAAU,GACfC,cAEI,IACJ,CACF,CAKA,cAAe,CACb,KAAK,QAAU,GACf,KAAK,SAAS,EACdA,aAEI,IACJ,CACF,CAMA,oBAAoBC,EAAY,CAC1BA,EAAI,SACN,KAAK,MAAUA,EAAI,OAA2C,MAC9DD,qBAEI,IACJ,EAEJ,CAMA,QAAiB,CACf,OAAOE;AAAA,SACF,KAAK;AAAA,kBACI,KAAK;AAAA,qBACF,KAAK;AAAA,wBACF,KAAK,eAAiB,OAAS,OAAS;AAAA,mBAC7C,KAAK;AAAA,mBACL,KAAK;AAAA;AAAA;AAAA;AAAA,wBAIA,KAAK,eAAiB;AAAA,6BACjB,KAAK;AAAA,2BACP,KAAK;AAAA,0BACN,KAAK;AAAA,yBACN,KAAK;AAAA,wBACN,KAAK;AAAA,qBACR,KAAK;AAAA,oBACN,KAAK;AAAA,qBACJ,KAAK;AAAA,qBACL,KAAK;AAAA;AAAA;AAAA,wBAGF,OAAK;AAAA,cACf,KAAK;AAAA;AAAA;AAAA,UAGT,KAAK;AAAA;AAAA,KAGb,CACF,EA1FIC,EAAA,CADDC,EAAS,CAAC,KAAMC,CAAU,CAAC,GA3BTX,EA4BjB,oBAIAS,EAAA,CADDC,EAAS,CAAC,KAAME,EAAsB,UAAW,gBAAgB,CAAC,GA/BhDZ,EAgCjB,8BAIAS,EAAA,CADDC,EAAS,CAAC,KAAMG,EAAoB,UAAW,cAAc,CAAC,GAnC5Cb,EAoCjB,4BAIAS,EAAA,CADDC,EAAS,CAAC,KAAMI,EAAmB,UAAW,aAAa,CAAC,GAvC1Cd,EAwCjB,2BAIAS,EAAA,CADDC,EAAS,CAAC,KAAM,QAAS,UAAW,WAAW,CAAC,GA3C9BV,EA4CjB",
+  "sourcesContent": ["import {css} from \"lit-element/lit-element.js\";\nexport default css`\n:host {\n  display: block;\n}\n\n.input-field {\n  width: 100%;\n  position: relative;\n}\n.input-field .placeholder {\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color-grey);\n  flex: 1;\n  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5));\n  z-index: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.input-field .placeholder[scw-hide] {\n  display: none;\n}\n.input-field textarea {\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color-grey-02);\n  flex: 1;\n  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5));\n  resize: vertical;\n  width: 100%;\n  min-height: var(--scw-min-height, 56px);\n  box-sizing: border-box;\n  border: 0;\n  background-color: rgba(0, 0, 0, 0);\n  z-index: 2;\n  position: relative;\n}\n.input-field textarea:focus {\n  outline: none;\n}\n\n:host([aria-disabled=true]) textarea {\n  text-align: LEFT;\n  font: var(--scw-type-text-04-font);\n  color: var(--scw-color-grey-07);\n  flex: 1;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL3Njb3R0cm91c2UvV29ya3NwYWNlL3NjdS13ZWItY29tcG9uZW50cy13ZWJzaXRlcy9zY3Utd2ViLWNvbXBvbmVudHMtd2Vic2l0ZXMvc3JjL3Njdy10ZXh0YXJlYS9zY3NzIiwic291cmNlcyI6WyJzY3ctdGV4dGFyZWEuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LWlucHV0LXRleHQtYmFzZS9fcGxhY2Vob2xkZXItdGV4dC1taXhpbnMuc2NzcyIsIi4uLy4uLy4uL2Rpc3QvdG9rZW5zL3NlZ21lbnRzL2NvbXAtc2N3LWlucHV0LXRleHQtYmFzZS9fZGVmYXVsdC10ZXh0LW1peGlucy5zY3NzIiwiLi4vLi4vLi4vZGlzdC90b2tlbnMvc2VnbWVudHMvY29tcC1zY3ctaW5wdXQtdGV4dC1iYXNlL19kaXNhYmxlZC10ZXh0LW1peGlucy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1BO0VBQ0U7OztBQUlGO0VBQ0U7RUFDQTs7QUFFQTtFQ1RBO0VBQ0E7RUFJRTtFQUVGO0VES0U7RUFRQTtFQUNBO0VBQ0E7RUFFQTtFQUNBO0VBQVE7O0FBRVI7RUFDRTs7QUFJSjtFRWhDQTtFQUNBO0VBSUU7RUFFRjtFRjRCRTtFQVFBO0VBRUE7RUFDQTtFQUNBO0VBRUE7RUFDQTtFQUNBO0VBQ0E7O0FBRUE7RUFDRTs7O0FBTUo7RUc3REE7RUFDQTtFQUlFO0VBRUYifQ== */`;\n", "import {html} from 'lit/static-html.js';// import {html} from 'lit';\nimport {unsafeStatic} from 'lit/static-html.js';// USE DIFFERENT 'html'!!!!\nimport {property} from 'lit/decorators.js';\nimport ScwFormComponent from '../scw-form-component/scw-form-component';\nimport {Components} from '../utils/enums/Components';\nimport styles from './scss/scw-textarea.scss';\nimport {InputTypes} from '../scw-input-field/inputTypes';\nimport {emit} from '../utils/events/event';\nimport {ScwEvents} from '../utils/events/event';\nimport getSuffix from '../utils/suffix';\nimport {\n  AutoCaptializeValues,\n  AutoCompleteValues,\n  AutoCorrectValues,\n} from '../utils/formEnums';\n\n/**\n * ScwTextarea\n * @class\n * @tag scw-textarea\n *\n * @cssprop --scw-input-padding - the padding around text within the textarea\n * @cssprop --scw-min-height - minimum height of the textarea\n * @event scw-focus input recieved focus\n * @event scw-blur input lost focus\n * @event scw-value-change value has changed (not necessarily value displayed)\n *\n */\nexport default class ScwTextarea extends ScwFormComponent {\n  /**\n  * styles\n  */\n  static get styles() {\n    return [\n      super.styles,\n      styles,\n    ];\n  }\n\n  /** constructor */\n  constructor() {\n    super();\n    this.element = Components.textarea;\n\n    const suffix = getSuffix();\n    this.scwInputLayout = unsafeStatic(\n        `scw-${Components.inputLayout}${suffix}`,\n    );\n  }\n\n  // ============== ScwTextarea ================================================\n  /** scw-single-input-layout with versioning suffix */\n  scwInputLayout : any;\n\n  /** (ScwTextareaField) type of input field */\n  @property({type: InputTypes})\n    type: InputTypes = InputTypes.text;\n\n  /** (ScwTextareaField) automatically capitalize input */\n  @property({type: AutoCaptializeValues, attribute: 'autocapitalize'})\n    autoCapitalize: AutoCaptializeValues = AutoCaptializeValues.default;\n\n  /** (ScwTextareaField) automatically completes input */\n  @property({type: AutoCompleteValues, attribute: 'autocomplete'})\n    autoComplete: AutoCompleteValues = AutoCompleteValues.default;\n\n  /** (ScwTextareaField) automatically correct input */\n  @property({type: AutoCorrectValues, attribute: 'autocorrect'})\n    autoCorrect: AutoCorrectValues = AutoCorrectValues.default;\n\n  /** (ScwTextareaField) automatically focus input */\n  @property({type: Boolean, attribute: 'autofocus'})\n    autoFocus = false;\n\n  /**\n  * handle focus into input\n  */\n  _focusHandler() {\n    this.focused = true;\n    emit(\n        ScwEvents.focus,\n        this,\n    );\n  }\n\n  /**\n  * handle blurs from input\n  */\n  _blurHandler() {\n    this.focused = false;\n    this.validate();\n    emit(\n        ScwEvents.blur,\n        this,\n    );\n  }\n\n  /**\n  * handle changes from input\n  * @param {CustomEvent} evt\n  */\n  _valueChangeHandler(evt: Event) {\n    if (evt.target ) {\n      this.value = ( evt.target as unknown as HTMLTextAreaElement ).value;\n      emit(\n          ScwEvents.valueChange,\n          this,\n      );\n    }\n  }\n\n  /**\n  * render\n  * @return {object} component DOM\n  */\n  render(): object {\n    return html`\n      <${this.scwInputLayout}\n        .label=\"${this.ariaLabel}\"\n        .feedback=\"${this.feedback}\"\n        aria-disabled=${this.ariaDisabled === 'true' ? 'true' : 'false'}\n        ?focused=${this.focused}\n        ?invalid=${this.invalid}>\n        <div \n          class=\"input-field\">\n          <textarea\n            ?disabled=${this.ariaDisabled === 'true' ? true : false}\n            autocapitalize=${this.autoCapitalize}\n            autocomplete=${this.autoComplete}\n            autocorrect=${this.autoCorrect}\n            ?autofocus=${this.autoFocus}\n            ?readonly=${this.readOnly}\n            @focus=${this._focusHandler}\n            @blur=${this._blurHandler}\n            @input=${this._valueChangeHandler}\n            .value=${this.value}></textarea>\n          <div \n            class=\"placeholder\"\n            ?scw-hide=${this.value ? true : false}>\n            ${this.placeholder}\n          </div>\n        </div>\n      </${this.scwInputLayout}>\n      <slot name=\"validation\"></slot>\n    `;\n  }\n}\n"],
+  "mappings": "o5BACA,IAAOA,EAAQC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;i7BC2Bf,IAAqBC,EAArB,cAAyCC,CAAiB,CAYxD,aAAc,CACZ,MAAM,EAeN,iBAIA,2BAIA,uBAIA,uBAIA,eAAY,GA9BZ,KAAK,mBAEL,IAAMC,EAASC,EAAU,EACzB,KAAK,eAAiBC,EAClB,wBAAgCF,GACpC,CACF,CAhBA,WAAW,QAAS,CAClB,MAAO,CACL,MAAM,OACNG,CACF,CACF,CAwCA,eAAgB,CACd,KAAK,QAAU,GACfC,cAEI,IACJ,CACF,CAKA,cAAe,CACb,KAAK,QAAU,GACf,KAAK,SAAS,EACdA,aAEI,IACJ,CACF,CAMA,oBAAoBC,EAAY,CAC1BA,EAAI,SACN,KAAK,MAAUA,EAAI,OAA2C,MAC9DD,qBAEI,IACJ,EAEJ,CAMA,QAAiB,CACf,OAAOE;AAAA,SACF,KAAK;AAAA,kBACI,KAAK;AAAA,qBACF,KAAK;AAAA,wBACF,KAAK,eAAiB,OAAS,OAAS;AAAA,mBAC7C,KAAK;AAAA,mBACL,KAAK;AAAA;AAAA;AAAA;AAAA,wBAIA,KAAK,eAAiB;AAAA,6BACjB,KAAK;AAAA,2BACP,KAAK;AAAA,0BACN,KAAK;AAAA,yBACN,KAAK;AAAA,wBACN,KAAK;AAAA,qBACR,KAAK;AAAA,oBACN,KAAK;AAAA,qBACJ,KAAK;AAAA,qBACL,KAAK;AAAA;AAAA;AAAA,wBAGF,OAAK;AAAA,cACf,KAAK;AAAA;AAAA;AAAA,UAGT,KAAK;AAAA;AAAA,KAGb,CACF,EA1FIC,EAAA,CADDC,EAAS,CAAC,KAAMC,CAAU,CAAC,GA3BTX,EA4BjB,oBAIAS,EAAA,CADDC,EAAS,CAAC,KAAME,EAAsB,UAAW,gBAAgB,CAAC,GA/BhDZ,EAgCjB,8BAIAS,EAAA,CADDC,EAAS,CAAC,KAAMG,EAAoB,UAAW,cAAc,CAAC,GAnC5Cb,EAoCjB,4BAIAS,EAAA,CADDC,EAAS,CAAC,KAAMI,EAAmB,UAAW,aAAa,CAAC,GAvC1Cd,EAwCjB,2BAIAS,EAAA,CADDC,EAAS,CAAC,KAAM,QAAS,UAAW,WAAW,CAAC,GA3C9BV,EA4CjB",
   "names": ["scw_textarea_default", "i", "ScwTextarea", "ScwFormComponent", "suffix", "getSuffix", "o", "scw_textarea_default", "emit", "evt", "n", "__decorateClass", "e", "InputTypes", "AutoCaptializeValues", "AutoCompleteValues", "AutoCorrectValues"]
 }

package/dist/scw.js

@@ -1,2 +1,2 @@
-import{a,b}from"./chunks/chunk.E2LMFNXM.js";import"./chunks/chunk.UXIAMI3F.js";import"./chunks/chunk.RSR7WC4R.js";import"./chunks/chunk.PKA6D7UK.js";import"./chunks/chunk.5YJY6NT6.js";export{a as config,b as defineComponents};
+import{a,b}from"./chunks/chunk.JHP2OQDD.js";import"./chunks/chunk.UXIAMI3F.js";import"./chunks/chunk.RSR7WC4R.js";import"./chunks/chunk.PKA6D7UK.js";import"./chunks/chunk.5YJY6NT6.js";export{a as config,b as defineComponents};
 //# sourceMappingURL=scw.js.map

package/dist/tokens/css.html

@@ -22,7 +22,7 @@
 			const clipboardType = urlParams.get('clipboardType');
 
 			import run from './apps/cheatsheet/main.js';
-			run('.', import.meta, '0.7.16', '../example/dist/tokens', clipboardType );
+			run('.', import.meta, '0.7.28', '../example/dist/tokens', clipboardType );
 		</script>
 
 		<style>
@@ -52,7 +52,7 @@
 		<div id="main"></div>
 
 		<div id="main-loading">
-			Loading Summit Tokenizer Cheatsheet 0.7.16
+			Loading Summit Tokenizer Cheatsheet 0.7.28
 		</div>
 
   </body>

package/dist/tokens/segments/comp-scw-alert/_description-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 198.5px;
-  height: 19px;
+  height: 24px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 19px;
+  height: 24px;
 }
 
 @mixin padding {
@@ -43,7 +43,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 22.15 );
   margin-right: calc( var( --scw-spacing-1 ) * 2.2 );
   margin-top: var( --scw-spacing-1 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }
 
 @mixin html-autolayout-padding {
@@ -51,5 +51,5 @@
   padding-left: calc( var( --scw-spacing-1 ) * 22.15 );
   padding-right: calc( var( --scw-spacing-1 ) * 2.2 );
   padding-top: var( --scw-spacing-1 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }

package/dist/tokens/segments/comp-scw-alert/_description-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-error-dark );
 $font-family: 'Proxima Nova';
 $font-weight: 400;
-$line-height: 1.218rem;
+$line-height: 1.5rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-font );
 $width: 198.5px;
-$height: 19px;
+$height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -24,8 +24,8 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 1;
 $top: var( --scw-spacing-1 );
-$top-percent: 48.75%;
-$bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+$top-percent: 55%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 $left: calc( var( --scw-spacing-1 ) * 22.15 );
 $left-percent: 72.57%;
 $right: calc( var( --scw-spacing-1 ) * 2.2 );

package/dist/tokens/segments/comp-scw-alert/_message-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 402px;
-  height: 19px;
+  height: 24px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 19px;
+  height: 24px;
 }
 
 @mixin padding {
@@ -43,7 +43,7 @@
   margin-left: var( --scw-spacing-2 );
   margin-right: var( --scw-spacing-2 );
   margin-top: var( --scw-spacing-1 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }
 
 @mixin html-autolayout-padding {
@@ -51,5 +51,5 @@
   padding-left: var( --scw-spacing-2 );
   padding-right: var( --scw-spacing-2 );
   padding-top: var( --scw-spacing-1 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }

package/dist/tokens/segments/comp-scw-alert/_message-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-error-dark );
 $font-family: 'Proxima Nova';
 $font-weight: 700;
-$line-height: 1.218rem;
+$line-height: 1.5rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-bold-font );
 $width: 402px;
-$height: 19px;
+$height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -24,8 +24,8 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 1;
 $top: var( --scw-spacing-1 );
-$top-percent: 48.75%;
-$bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+$top-percent: 55%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 $left: var( --scw-spacing-2 );
 $left-percent: 50%;
 $right: var( --scw-spacing-2 );

package/dist/tokens/segments/comp-scw-card/_color-checking-action-mixins.scss

@@ -15,7 +15,7 @@
 
 @mixin sizing {
   width: 83px;
-  height: 32px;
+  height: 37px;
 }
 
 @mixin width {
@@ -23,7 +23,7 @@
 }
 
 @mixin height {
-  height: 32px;
+  height: 37px;
 }
 
 @mixin padding {
@@ -56,7 +56,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 44.2 );
   margin-bottom: 0px;
 }
 
@@ -64,6 +64,6 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 44.2 );
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-action-vars.scss

@@ -7,7 +7,7 @@ $corner-radius-top-right: 6px;
 $corner-radius-bottom-right: 6px;
 $corner-radius-bottom-left: 6px;
 $width: 83px;
-$height: 32px;
+$height: 37px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -18,8 +18,8 @@ $counter-axis-align-items: CENTER;
 $item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
 $layout-align: INHERIT;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 44.7 );
-$top-percent: 96.66%;
+$top: calc( var( --scw-spacing-1 ) * 44.2 );
+$top-percent: 96.14%;
 $bottom: 0px;
 $left: 0px;
 $left-percent: 6.53%;

package/dist/tokens/segments/comp-scw-card/_color-checking-description-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 26px;
+  height: 27px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 26px;
+  height: 27px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  margin-bottom: var( --scw-spacing-4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  padding-bottom: var( --scw-spacing-4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-description-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-grey-02 );
 $font-family: 'Proxima Nova';
 $font-weight: 400;
-$line-height: 1.625rem;
+$line-height: 1.688rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-06-font );
 $width: 636px;
-$height: 26px;
+$height: 27px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -23,9 +23,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 41.3 );
-$top-percent: 88.94%;
-$bottom: var( --scw-spacing-4 );
+$top: calc( var( --scw-spacing-1 ) * 40.7 );
+$top-percent: 87.79%;
+$bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-checking-heading-mixins.scss

@@ -45,14 +45,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 37 );
+  margin-bottom: var( --scw-spacing-8 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 37 );
+  padding-bottom: var( --scw-spacing-8 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-heading-vars.scss

@@ -13,9 +13,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 37.6 );
-$top-percent: 81.52%;
-$bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+$top: calc( var( --scw-spacing-1 ) * 37 );
+$top-percent: 80.27%;
+$bottom: var( --scw-spacing-8 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-checking-image-mixins.scss

@@ -17,7 +17,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 341px;
+  height: 330px;
 }
 
 @mixin width {
@@ -25,7 +25,7 @@
 }
 
 @mixin height {
-  height: 341px;
+  height: 330px;
 }
 
 @mixin padding {
@@ -59,7 +59,7 @@
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }
 
 @mixin html-autolayout-padding {
@@ -67,5 +67,5 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-image-vars.scss

@@ -7,7 +7,7 @@ $corner-radius-top-right: 10px;
 $corner-radius-bottom-right: 10px;
 $corner-radius-bottom-left: 10px;
 $width: 636px;
-$height: 341px;
+$height: 330px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -19,8 +19,8 @@ $item-spacing: calc( var( --scw-spacing-1 ) * 0.8 );
 $layout-align: STRETCH;
 $layout-grow: 1;
 $top: 0px;
-$top-percent: 35.59%;
-$bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+$top-percent: 34.45%;
+$bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-checking-super-heading-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 19px;
+  height: 24px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 19px;
+  height: 24px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+  margin-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+  padding-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-super-heading-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-checking-04 );
 $font-family: 'Proxima Nova Condensed';
 $font-weight: 700;
-$line-height: 1.218rem;
+$line-height: 1.5rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-bold-condensed-font );
 $width: 636px;
-$height: 19px;
+$height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -23,9 +23,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 34.9 );
-$top-percent: 74.84%;
-$bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+$top: calc( var( --scw-spacing-1 ) * 33.8 );
+$top-percent: 73.07%;
+$bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-action-mixins.scss

@@ -15,7 +15,7 @@
 
 @mixin sizing {
   width: 83px;
-  height: 32px;
+  height: 37px;
 }
 
 @mixin width {
@@ -23,7 +23,7 @@
 }
 
 @mixin height {
-  height: 32px;
+  height: 37px;
 }
 
 @mixin padding {
@@ -56,7 +56,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 44.2 );
   margin-bottom: 0px;
 }
 
@@ -64,6 +64,6 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 44.2 );
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-action-vars.scss

@@ -7,7 +7,7 @@ $corner-radius-top-right: 6px;
 $corner-radius-bottom-right: 6px;
 $corner-radius-bottom-left: 6px;
 $width: 83px;
-$height: 32px;
+$height: 37px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -18,8 +18,8 @@ $counter-axis-align-items: CENTER;
 $item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
 $layout-align: INHERIT;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 44.7 );
-$top-percent: 96.66%;
+$top: calc( var( --scw-spacing-1 ) * 44.2 );
+$top-percent: 96.14%;
 $bottom: 0px;
 $left: 0px;
 $left-percent: 6.53%;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-description-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 26px;
+  height: 27px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 26px;
+  height: 27px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  margin-bottom: var( --scw-spacing-4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  padding-bottom: var( --scw-spacing-4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-description-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-grey-02 );
 $font-family: 'Proxima Nova';
 $font-weight: 400;
-$line-height: 1.625rem;
+$line-height: 1.688rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-06-font );
 $width: 636px;
-$height: 26px;
+$height: 27px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -23,9 +23,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 41.3 );
-$top-percent: 88.94%;
-$bottom: var( --scw-spacing-4 );
+$top: calc( var( --scw-spacing-1 ) * 40.7 );
+$top-percent: 87.79%;
+$bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-heading-mixins.scss

@@ -45,14 +45,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 37 );
+  margin-bottom: var( --scw-spacing-8 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 37 );
+  padding-bottom: var( --scw-spacing-8 );
 }

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-heading-vars.scss

@@ -13,9 +13,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 37.6 );
-$top-percent: 81.52%;
-$bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+$top: calc( var( --scw-spacing-1 ) * 37 );
+$top-percent: 80.27%;
+$bottom: var( --scw-spacing-8 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-image-mixins.scss

@@ -17,7 +17,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 341px;
+  height: 330px;
 }
 
 @mixin width {
@@ -25,7 +25,7 @@
 }
 
 @mixin height {
-  height: 341px;
+  height: 330px;
 }
 
 @mixin padding {
@@ -59,7 +59,7 @@
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }
 
 @mixin html-autolayout-padding {
@@ -67,5 +67,5 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }