@vscode-elements/elements 1.0.0-pre.11 → 1.0.0

package/dist/vscode-textfield/vscode-textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-textfield.js","sourceRoot":"","sources":["../../src/vscode-textfield/vscode-textfield.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAmBlD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,eAAe,GAArB,MAAM,eACX,SAAQ,UAAU;IAyElB;;;OAGG;IAEH,IAAI,IAAI,CAAC,GAAc;QACrB,MAAM,UAAU,GAAgB;YAC9B,OAAO;YACP,MAAM;YACN,gBAAgB;YAChB,OAAO;YACP,MAAM;YACN,OAAO;YACP,QAAQ;YACR,UAAU;YACV,QAAQ;YACR,KAAK;YACL,MAAM;YACN,MAAM;YACN,KAAK;YACL,MAAM;SACP,CAAC;QAEF,IAAI,CAAC,KAAK,GAAG,CACX,UAAU,CAAC,QAAQ,CAAC,GAAgB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CACxC,CAAC;IACjB,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAGD,IAAI,KAAK,CAAC,GAAW;QACnB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;YAClB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IACD,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAW;QACvB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;IACvB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAW;QACvB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;IACvB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;IAC3C,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;IACtC,CAAC;IAED,aAAa;QACX,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;IACzC,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;IAC1C,CAAC;IAED,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAzJV,iBAAY,GAA6B,SAAS,CAAC;QAGnD,cAAS,GAAG,KAAK,CAAC;QAGlB,iBAAY,GAAG,EAAE,CAAC;QAGlB,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,YAAO,GAAG,KAAK,CAAC;QAEhB;;;;WAIG;QAEH,UAAK,GAAG,EAAE,CAAC;QAGX,QAAG,GAAuB,SAAS,CAAC;QAGpC,cAAS,GAAuB,SAAS,CAAC;QAG1C,QAAG,GAAuB,SAAS,CAAC;QAGpC,cAAS,GAAuB,SAAS,CAAC;QAG1C,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAuB,SAAS,CAAC;QAGrC,YAAO,GAAuB,SAAS,CAAC;QAGxC,gBAAW,GAAuB,SAAS,CAAC;QAG5C,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAuB,SAAS,CAAC;QAyJ7B,WAAM,GAAG,EAAE,CAAC;QAGZ,UAAK,GAAc,MAAM,CAAC;QA1DhC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3C,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;YAC9B,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,wBAAwB,CACtB,IAAY,EACZ,GAAkB,EAClB,KAAoB;QAEpB,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAEjD,MAAM,2BAA2B,GAAG;YAClC,KAAK;YACL,WAAW;YACX,KAAK;YACL,WAAW;YACX,SAAS;YACT,UAAU;YACV,MAAM;SACP,CAAC;QAEF,IAAI,2BAA2B,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YAC/C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,gBAAgB;IAChB,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC/B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAED,gBAAgB;IAChB,wBAAwB,CACtB,KAAa,EACb,KAAiC;QAEjC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAaO,YAAY;QAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;QAElC,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAChD,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;gBACpC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,IAAI,CAAC,QAAQ,CAAC,QAAQ,EACtB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,EAC/B,IAAI,CAAC,QAAQ,CACd,CAAC;IACJ,CAAC;IAEO,QAAQ,CAAC,EAAc;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAE7B,8CAA8C;QAC9C,kBAAkB;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE,EAAC,MAAM,EAAE,EAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,EAAE,EAAC,EAAC,CAAC,CAC3E,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,EAAS;QACzB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxC,kBAAkB;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAuC,YAAY,EAAE;YAClE,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAC;SAC9C,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAEO,OAAO;QACb,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAEO,UAAU,CAAC,EAAiB;QAClC,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YAC/C,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;QACxC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;eAIA,IAAI,CAAC,IAAI;qBACH,IAAI,CAAC,SAAS;uBACZ,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC;qBAC9B,IAAI,CAAC,KAAK;oBACX,IAAI,CAAC,QAAQ;cACnB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;oBACb,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;cAC/B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;oBACb,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;oBACzB,IAAI,CAAC,QAAQ;eAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBACjB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;sBACnB,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;oBAC7B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;eAClB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBAClB,SAAS,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;gBAC1D,IAAI,CAAC,OAAO;kBACV,IAAI,CAAC,SAAS;iBACf,IAAI,CAAC,QAAQ;iBACb,IAAI,CAAC,QAAQ;mBACX,IAAI,CAAC,UAAU;;;KAG7B,CAAC;IACJ,CAAC;;AA3TM,sBAAM,GAAG,MAAM,AAAT,CAAU;AAEvB,gBAAgB;AACT,8BAAc,GAAG,IAAI,AAAP,CAAQ;AAE7B,gBAAgB;AACA,iCAAiB,GAAmB;IAClD,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAGF;IADC,QAAQ,EAAE;qDACwC;AAGnD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;kDACvB;AAGlB;IADC,QAAQ,CAAC,EAAC,SAAS,EAAE,eAAe,EAAC,CAAC;qDACrB;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDACzB;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDACzB;AAQhB;IADC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;8CAClB;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACW;AAGpC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACiB;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACW;AAGpC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACiB;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;6CACW;AAGrC;IADC,QAAQ,EAAE;gDAC6B;AAGxC;IADC,QAAQ,EAAE;oDACiC;AAG5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACY;AAOrC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;2CAsBzB;AAMD;IADC,QAAQ,EAAE;4CAMV;AA+GO;IADP,KAAK,CAAC,QAAQ,CAAC;iDACoB;AAG5B;IADP,KAAK,EAAE;+CACY;AAGZ;IADP,KAAK,EAAE;8CAC0B;AApOvB,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CAgU3B","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-textfield.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\ntype InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'file'\n  | 'month'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'time'\n  | 'url'\n  | 'week';\n\n/**\n * A simple inline textfield\n *\n * @slot content-before - A slot before the editable area but inside of the component. It is used to place icons.\n * @slot content-after - A slot after the editable area but inside of the component. It is used to place icons.\n *\n * @fires {InputEvent} input\n * @fires {Event} change\n *\n * @cssprop --vscode-settings-textInputBackground\n * @cssprop --vscode-settings-textInputBorder\n * @cssprop --vscode-settings-textInputForeground\n * @cssprop --vscode-focusBorder\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-input-placeholderForeground\n * @cssprop --vscode-button-background\n * @cssprop --vscode-button-foreground\n * @cssprop --vscode-button-hoverBackground\n */\n@customElement('vscode-textfield')\nexport class VscodeTextfield\n  extends VscElement\n  implements AssociatedFormControl\n{\n  static styles = styles;\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property()\n  autocomplete: 'on' | 'off' | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  autofocus = false;\n\n  @property({attribute: 'default-value'})\n  defaultValue = '';\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  focused = false;\n\n  @property({type: Boolean, reflect: true})\n  invalid = false;\n\n  /**\n   * @internal\n   * Set `aria-label` for the inner input element. Should not be set,\n   * vscode-label will do it automatically.\n   */\n  @property({attribute: false})\n  label = '';\n\n  @property({type: Number})\n  max: number | undefined = undefined;\n\n  @property({type: Number})\n  maxLength: number | undefined = undefined;\n\n  @property({type: Number})\n  min: number | undefined = undefined;\n\n  @property({type: Number})\n  minLength: number | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  multiple = false;\n\n  @property({reflect: true})\n  name: string | undefined = undefined;\n\n  @property()\n  pattern: string | undefined = undefined;\n\n  @property()\n  placeholder: string | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  readonly = false;\n\n  @property({type: Boolean, reflect: true})\n  required = false;\n\n  @property({type: Number})\n  step: number | undefined = undefined;\n\n  /**\n   * Same as the `type` of the native `<input>` element but only a subset of types are supported.\n   * The supported ones are: `color`,`date`,`datetime-local`,`email`,`file`,`month`,`number`,`password`,`search`,`tel`,`text`,`time`,`url`,`week`\n   */\n  @property({reflect: true})\n  set type(val: InputType) {\n    const validTypes: InputType[] = [\n      'color',\n      'date',\n      'datetime-local',\n      'email',\n      'file',\n      'month',\n      'number',\n      'password',\n      'search',\n      'tel',\n      'text',\n      'time',\n      'url',\n      'week',\n    ];\n\n    this._type = (\n      validTypes.includes(val as InputType) ? val : 'text'\n    ) as InputType;\n  }\n  get type(): InputType {\n    return this._type;\n  }\n\n  @property()\n  set value(val: string) {\n    if (this.type !== 'file') {\n      this._value = val;\n      this._internals.setFormValue(val);\n    }\n  }\n  get value(): string {\n    return this._value;\n  }\n\n  /**\n   * Lowercase alias to minLength\n   */\n  set minlength(val: number) {\n    this.minLength = val;\n  }\n\n  get minlength(): number | undefined {\n    return this.minLength;\n  }\n\n  /**\n   * Lowercase alias to maxLength\n   */\n  set maxlength(val: number) {\n    this.maxLength = val;\n  }\n\n  get maxlength(): number | undefined {\n    return this.maxLength;\n  }\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n\n  checkValidity() {\n    this._setValidityFromInput();\n    return this._internals.checkValidity();\n  }\n\n  reportValidity() {\n    this._setValidityFromInput();\n    return this._internals.reportValidity();\n  }\n\n  get wrappedElement(): HTMLInputElement {\n    return this._inputEl;\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this._inputEl.checkValidity();\n      this._setValidityFromInput();\n      this._internals.setFormValue(this._inputEl.value);\n    });\n  }\n\n  attributeChangedCallback(\n    name: string,\n    old: string | null,\n    value: string | null\n  ): void {\n    super.attributeChangedCallback(name, old, value);\n\n    const validationRelatedAttributes = [\n      'max',\n      'maxlength',\n      'min',\n      'minlength',\n      'pattern',\n      'required',\n      'step',\n    ];\n\n    if (validationRelatedAttributes.includes(name)) {\n      this.updateComplete.then(() => {\n        this._setValidityFromInput();\n      });\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    this.value = state;\n  }\n\n  @query('#input')\n  private _inputEl!: HTMLInputElement;\n\n  @state()\n  private _value = '';\n\n  @state()\n  private _type: InputType = 'text';\n\n  private _internals: ElementInternals;\n\n  private _dataChanged() {\n    this._value = this._inputEl.value;\n\n    if (this.type === 'file' && this._inputEl.files) {\n      for (const f of this._inputEl.files) {\n        this._internals.setFormValue(f);\n      }\n    } else {\n      this._internals.setFormValue(this._inputEl.value);\n    }\n  }\n\n  private _setValidityFromInput() {\n    this._internals.setValidity(\n      this._inputEl.validity,\n      this._inputEl.validationMessage,\n      this._inputEl\n    );\n  }\n\n  private _onInput(ev: InputEvent) {\n    this._dataChanged();\n    this._setValidityFromInput();\n\n    // native input event dispatched automatically\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent('vsc-input', {detail: {data: ev.data, originalEvent: ev}})\n    );\n  }\n\n  private _onChange(ev: Event) {\n    this._dataChanged();\n    this._setValidityFromInput();\n    this.dispatchEvent(new Event('change'));\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent<{data: string; originalEvent: Event}>('vsc-change', {\n        detail: {data: this.value, originalEvent: ev},\n      })\n    );\n  }\n\n  private _onFocus() {\n    this.focused = true;\n  }\n\n  private _onBlur() {\n    this.focused = false;\n  }\n\n  private _onKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Enter' && this._internals.form) {\n      this._internals.form?.requestSubmit();\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <slot name=\"content-before\"></slot>\n      <input\n        id=\"input\"\n        type=${this.type}\n        ?autofocus=${this.autofocus}\n        autocomplete=${ifDefined(this.autocomplete)}\n        aria-label=${this.label}\n        ?disabled=${this.disabled}\n        max=${ifDefined(this.max)}\n        maxlength=${ifDefined(this.maxLength)}\n        min=${ifDefined(this.min)}\n        minlength=${ifDefined(this.minLength)}\n        ?multiple=${this.multiple}\n        name=${ifDefined(this.name)}\n        pattern=${ifDefined(this.pattern)}\n        placeholder=${ifDefined(this.placeholder)}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        step=${ifDefined(this.step)}\n        .value=${ifDefined(this.type !== 'file' ? this._value : undefined)}\n        @blur=${this._onBlur}\n        @change=${this._onChange}\n        @focus=${this._onFocus}\n        @input=${this._onInput}\n        @keydown=${this._onKeyDown}\n      />\n      <slot name=\"content-after\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-textfield': VscodeTextfield;\n  }\n}\n"]}
+{"version":3,"file":"vscode-textfield.js","sourceRoot":"","sources":["../../src/vscode-textfield/vscode-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-textfield.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\ntype InputType =\n  | 'color'\n  | 'date'\n  | 'datetime-local'\n  | 'email'\n  | 'file'\n  | 'month'\n  | 'number'\n  | 'password'\n  | 'search'\n  | 'tel'\n  | 'text'\n  | 'time'\n  | 'url'\n  | 'week';\n\n/**\n * A simple inline textfield\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @slot content-before - A slot before the editable area but inside of the component. It is used to place icons.\n * @slot content-after - A slot after the editable area but inside of the component. It is used to place icons.\n *\n * @fires {InputEvent} input\n * @fires {Event} change\n *\n * @cssprop --vscode-settings-textInputBackground\n * @cssprop --vscode-settings-textInputBorder\n * @cssprop --vscode-settings-textInputForeground\n * @cssprop --vscode-focusBorder\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-input-placeholderForeground\n * @cssprop --vscode-button-background\n * @cssprop --vscode-button-foreground\n * @cssprop --vscode-button-hoverBackground\n */\n@customElement('vscode-textfield')\nexport class VscodeTextfield\n  extends VscElement\n  implements AssociatedFormControl\n{\n  static styles = styles;\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property()\n  autocomplete: 'on' | 'off' | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  autofocus = false;\n\n  @property({attribute: 'default-value'})\n  defaultValue = '';\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  focused = false;\n\n  @property({type: Boolean, reflect: true})\n  invalid = false;\n\n  /**\n   * @internal\n   * Set `aria-label` for the inner input element. Should not be set,\n   * vscode-label will do it automatically.\n   */\n  @property({attribute: false})\n  label = '';\n\n  @property({type: Number})\n  max: number | undefined = undefined;\n\n  @property({type: Number})\n  maxLength: number | undefined = undefined;\n\n  @property({type: Number})\n  min: number | undefined = undefined;\n\n  @property({type: Number})\n  minLength: number | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  multiple = false;\n\n  @property({reflect: true})\n  name: string | undefined = undefined;\n\n  @property()\n  pattern: string | undefined = undefined;\n\n  @property()\n  placeholder: string | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  readonly = false;\n\n  @property({type: Boolean, reflect: true})\n  required = false;\n\n  @property({type: Number})\n  step: number | undefined = undefined;\n\n  /**\n   * Same as the `type` of the native `<input>` element but only a subset of types are supported.\n   * The supported ones are: `color`,`date`,`datetime-local`,`email`,`file`,`month`,`number`,`password`,`search`,`tel`,`text`,`time`,`url`,`week`\n   */\n  @property({reflect: true})\n  set type(val: InputType) {\n    const validTypes: InputType[] = [\n      'color',\n      'date',\n      'datetime-local',\n      'email',\n      'file',\n      'month',\n      'number',\n      'password',\n      'search',\n      'tel',\n      'text',\n      'time',\n      'url',\n      'week',\n    ];\n\n    this._type = (\n      validTypes.includes(val as InputType) ? val : 'text'\n    ) as InputType;\n  }\n  get type(): InputType {\n    return this._type;\n  }\n\n  @property()\n  set value(val: string) {\n    if (this.type !== 'file') {\n      this._value = val;\n      this._internals.setFormValue(val);\n    }\n  }\n  get value(): string {\n    return this._value;\n  }\n\n  /**\n   * Lowercase alias to minLength\n   */\n  set minlength(val: number) {\n    this.minLength = val;\n  }\n\n  get minlength(): number | undefined {\n    return this.minLength;\n  }\n\n  /**\n   * Lowercase alias to maxLength\n   */\n  set maxlength(val: number) {\n    this.maxLength = val;\n  }\n\n  get maxlength(): number | undefined {\n    return this.maxLength;\n  }\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n\n  checkValidity() {\n    this._setValidityFromInput();\n    return this._internals.checkValidity();\n  }\n\n  reportValidity() {\n    this._setValidityFromInput();\n    return this._internals.reportValidity();\n  }\n\n  get wrappedElement(): HTMLInputElement {\n    return this._inputEl;\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this._inputEl.checkValidity();\n      this._setValidityFromInput();\n      this._internals.setFormValue(this._inputEl.value);\n    });\n  }\n\n  attributeChangedCallback(\n    name: string,\n    old: string | null,\n    value: string | null\n  ): void {\n    super.attributeChangedCallback(name, old, value);\n\n    const validationRelatedAttributes = [\n      'max',\n      'maxlength',\n      'min',\n      'minlength',\n      'pattern',\n      'required',\n      'step',\n    ];\n\n    if (validationRelatedAttributes.includes(name)) {\n      this.updateComplete.then(() => {\n        this._setValidityFromInput();\n      });\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    this.value = state;\n  }\n\n  @query('#input')\n  private _inputEl!: HTMLInputElement;\n\n  @state()\n  private _value = '';\n\n  @state()\n  private _type: InputType = 'text';\n\n  private _internals: ElementInternals;\n\n  private _dataChanged() {\n    this._value = this._inputEl.value;\n\n    if (this.type === 'file' && this._inputEl.files) {\n      for (const f of this._inputEl.files) {\n        this._internals.setFormValue(f);\n      }\n    } else {\n      this._internals.setFormValue(this._inputEl.value);\n    }\n  }\n\n  private _setValidityFromInput() {\n    this._internals.setValidity(\n      this._inputEl.validity,\n      this._inputEl.validationMessage,\n      this._inputEl\n    );\n  }\n\n  private _onInput(ev: InputEvent) {\n    this._dataChanged();\n    this._setValidityFromInput();\n\n    // native input event dispatched automatically\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent('vsc-input', {detail: {data: ev.data, originalEvent: ev}})\n    );\n  }\n\n  private _onChange(ev: Event) {\n    this._dataChanged();\n    this._setValidityFromInput();\n    this.dispatchEvent(new Event('change'));\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent<{data: string; originalEvent: Event}>('vsc-change', {\n        detail: {data: this.value, originalEvent: ev},\n      })\n    );\n  }\n\n  private _onFocus() {\n    this.focused = true;\n  }\n\n  private _onBlur() {\n    this.focused = false;\n  }\n\n  private _onKeyDown(ev: KeyboardEvent) {\n    if (ev.key === 'Enter' && this._internals.form) {\n      this._internals.form?.requestSubmit();\n    }\n  }\n\n  render(): TemplateResult {\n    return html`\n      <slot name=\"content-before\"></slot>\n      <input\n        id=\"input\"\n        type=${this.type}\n        ?autofocus=${this.autofocus}\n        autocomplete=${ifDefined(this.autocomplete)}\n        aria-label=${this.label}\n        ?disabled=${this.disabled}\n        max=${ifDefined(this.max)}\n        maxlength=${ifDefined(this.maxLength)}\n        min=${ifDefined(this.min)}\n        minlength=${ifDefined(this.minLength)}\n        ?multiple=${this.multiple}\n        name=${ifDefined(this.name)}\n        pattern=${ifDefined(this.pattern)}\n        placeholder=${ifDefined(this.placeholder)}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        step=${ifDefined(this.step)}\n        .value=${ifDefined(this.type !== 'file' ? this._value : undefined)}\n        @blur=${this._onBlur}\n        @change=${this._onChange}\n        @focus=${this._onFocus}\n        @input=${this._onInput}\n        @keydown=${this._onKeyDown}\n      />\n      <slot name=\"content-after\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-textfield': VscodeTextfield;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode-elements/elements",
-  "version": "1.0.0-pre.11",
+  "version": "1.0.0",
   "description": "Webcomponents for creating Visual Studio Code extensions",
   "main": "dist/main.js",
   "module": "dist/main.js",
@@ -9,6 +9,7 @@
   "files": [
     "dist",
     "custom-elements.json",
+    "vscode.*-custom-data.json",
     "!dist/**/*.test.*"
   ],
   "customElements": "custom-elements.json",
@@ -16,7 +17,7 @@
     "build": "wireit",
     "build:ts": "wireit",
     "build:watch": "wireit",
-    "clean": "rimraf .wireit && rimraf coverage && rimraf dist && rimraf custom-elements.json && rimraf stats.html",
+    "clean": "rimraf -g .wireit coverage dist custom-elements.json stats.html vscode.*-custom-data.json",
     "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
     "lint:eslint": "eslint src/**/*.ts",
     "lint:lit-analyzer": "lit-analyzer",
@@ -29,7 +30,8 @@
     "test:watch": "wtr --watch",
     "checksize": "npm run build && cat dist/bundled.js | gzip -9 | wc -c",
     "generate": "node scripts/generateComponent.js",
-    "icons": "node scripts/generateIconList.js"
+    "icons": "node scripts/generateIconList.js",
+    "vscode-data": "wireit"
   },
   "wireit": {
     "analyze": {
@@ -46,6 +48,7 @@
       "command": "rollup -c --file dist/bundled.js",
       "dependencies": [
         "analyze",
+        "vscode-data",
         "build:ts"
       ],
       "files": [
@@ -100,6 +103,19 @@
         "src/**/*.ts"
       ],
       "output": []
+    },
+    "vscode-data": {
+      "command": "node scripts/generate-custom-data.mjs",
+      "dependencies": [
+        "analyze"
+      ],
+      "files": [
+        "custom-elements.json"
+      ],
+      "output": [
+        "vscode.html-custom-data.json",
+        "vscode.css-custom-data.json"
+      ]
     }
   },
   "keywords": [
@@ -150,6 +166,7 @@
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
+    "custom-element-vs-code-integration": "^1.2.1",
     "deepmerge": "^4.3.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",

package/vscode.css-custom-data.json

@@ -0,0 +1,267 @@
+{
+  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
+  "version": 1.1,
+  "properties": [
+    { "name": "--vscode-font-family", "values": [] },
+    {
+      "name": "--vscode-badge-background",
+      "description": "default and counter variant background color",
+      "values": []
+    },
+    {
+      "name": "--vscode-badge-foreground",
+      "description": "default and counter variant foreground color",
+      "values": []
+    },
+    {
+      "name": "--vscode-activityBarBadge-background",
+      "description": "activity bar variant background color",
+      "values": []
+    },
+    {
+      "name": "--vscode-activityBarBadge-foreground",
+      "description": "activity bar variant foreground color",
+      "values": []
+    },
+    { "name": "--vscode-button-background", "values": [] },
+    { "name": "--vscode-button-foreground", "values": [] },
+    { "name": "--vscode-button-border", "values": [] },
+    { "name": "--vscode-button-hoverBackground", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-button-secondaryForeground", "values": [] },
+    { "name": "--vscode-button-secondaryBackground", "values": [] },
+    { "name": "--vscode-button-secondaryHoverBackground", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    {
+      "name": "--vsc-foreground-translucent",
+      "description": "Label font color. 90% transparency version of `--vscode-foreground` by default.",
+      "values": []
+    },
+    { "name": "--vscode-settings-checkboxBackground", "values": [] },
+    { "name": "--vscode-settings-checkboxBorder", "values": [] },
+    { "name": "--vscode-settings-checkboxForeground", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    {
+      "name": "--vscode-sideBar-background",
+      "description": "Background color",
+      "values": []
+    },
+    {
+      "name": "--vscode-focusBorder",
+      "description": "Focus border color",
+      "values": []
+    },
+    {
+      "name": "--vscode-font-family",
+      "description": "Header font family",
+      "values": []
+    },
+    {
+      "name": "--vscode-sideBarSectionHeader-background",
+      "description": "Header background",
+      "values": []
+    },
+    {
+      "name": "--vscode-icon-foreground",
+      "description": "Arrow icon color",
+      "values": []
+    },
+    {
+      "name": "--vscode-sideBarTitle-foreground",
+      "description": "Header font color",
+      "values": []
+    },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-menu-background", "values": [] },
+    { "name": "--vscode-menu-border", "values": [] },
+    { "name": "--vscode-menu-foreground", "values": [] },
+    { "name": "--vscode-widget-shadow", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-menu-background", "values": [] },
+    { "name": "--vscode-menu-selectionBorder", "values": [] },
+    { "name": "--vscode-menu-foreground", "values": [] },
+    { "name": "--vscode-menu-selectionBackground", "values": [] },
+    { "name": "--vscode-menu-selectionForeground", "values": [] },
+    { "name": "--vscode-menu-separatorBackground", "values": [] },
+    {
+      "name": "--label-width",
+      "description": "The width of the label in horizontal mode",
+      "values": []
+    },
+    {
+      "name": "--label-right-margin",
+      "description": "The right margin of the label in horizontal mode",
+      "values": []
+    },
+    {
+      "name": "--vsc-foreground-translucent",
+      "description": "Default text color. 90% transparency version of `--vscode-foreground` by default.",
+      "values": []
+    },
+    { "name": "--vscode-icon-foreground", "values": [] },
+    {
+      "name": "--vscode-toolbar-hoverBackground",
+      "description": "Hover state background color in `active-icon` mode",
+      "values": []
+    },
+    {
+      "name": "--vscode-toolbar-activeBackground",
+      "description": "Active state background color in `active-icon` mode",
+      "values": []
+    },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-foreground", "values": [] },
+    { "name": "--dropdown-z-index", "values": [] },
+    { "name": "--vscode-badge-background", "values": [] },
+    { "name": "--vscode-badge-foreground", "values": [] },
+    { "name": "--vscode-settings-dropdownBorder", "values": [] },
+    { "name": "--vscode-settings-checkboxBackground", "values": [] },
+    { "name": "--vscode-settings-dropdownBackground", "values": [] },
+    { "name": "--vscode-settings-dropdownListBorder", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-foreground", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-list-activeSelectionBackground", "values": [] },
+    { "name": "--vscode-list-activeSelectionForeground", "values": [] },
+    { "name": "--vscode-list-focusOutline", "values": [] },
+    { "name": "--vscode-list-hoverBackground", "values": [] },
+    { "name": "--vscode-list-hoverForeground", "values": [] },
+    { "name": "--vscode-list-hoverBackground", "values": [] },
+    { "name": "--vscode-settings-textInputBackground", "values": [] },
+    { "name": "--vscode-list-hoverBackground", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    {
+      "name": "--vsc-foreground-translucent",
+      "description": "Label font color. 90% transparency version of `--vscode-foreground` by default.",
+      "values": []
+    },
+    { "name": "--vscode-settings-checkboxBackground", "values": [] },
+    { "name": "--vscode-settings-checkboxBorder", "values": [] },
+    { "name": "--vscode-settings-checkboxForeground", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    {
+      "name": "--min-thumb-height",
+      "description": "Scrollbar thumb minimum height",
+      "values": []
+    },
+    { "name": "--vscode-scrollbar-shadow", "values": [] },
+    { "name": "--vscode-scrollbarSlider-background", "values": [] },
+    { "name": "--vscode-scrollbarSlider-hoverBackground", "values": [] },
+    { "name": "--vscode-scrollbarSlider-activeBackground", "values": [] },
+    { "name": "--dropdown-z-index", "values": [] },
+    { "name": "--vscode-badge-background", "values": [] },
+    { "name": "--vscode-badge-foreground", "values": [] },
+    { "name": "--vscode-settings-dropdownBorder", "values": [] },
+    { "name": "--vscode-settings-checkboxBackground", "values": [] },
+    { "name": "--vscode-settings-dropdownBackground", "values": [] },
+    { "name": "--vscode-settings-dropdownListBorder", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-foreground", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-list-activeSelectionBackground", "values": [] },
+    { "name": "--vscode-list-activeSelectionForeground", "values": [] },
+    { "name": "--vscode-list-focusOutline", "values": [] },
+    { "name": "--vscode-list-hoverBackground", "values": [] },
+    { "name": "--vscode-list-hoverForeground", "values": [] },
+    { "name": "--vscode-list-hoverBackground", "values": [] },
+    { "name": "--vscode-settings-textInputBackground", "values": [] },
+    { "name": "--hover-border", "values": [] },
+    { "name": "--vscode-foreground", "values": [] },
+    { "name": "--vscode-panelTitle-inactiveForeground", "values": [] },
+    { "name": "--vscode-panelTitle-activeForeground", "values": [] },
+    { "name": "--vscode-panelTitle-activeBorder", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-settings-headerForeground", "values": [] },
+    { "name": "--vscode-panel--background", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--border", "values": [] },
+    { "name": "--foreground", "values": [] },
+    { "name": "--resize-hover-border", "values": [] },
+    { "name": "--tinted-row-background", "values": [] },
+    { "name": "--header-background", "values": [] },
+    { "name": "--font-size", "values": [] },
+    { "name": "--font-family", "values": [] },
+    { "name": "--vscode-keybindingTable-rowsBackground", "values": [] },
+    { "name": "--vscode-editorGroup-border", "values": [] },
+    { "name": "--vscode-foreground", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    {
+      "name": "--vscode-keybindingTable-headerBackground",
+      "description": "Table header background",
+      "values": []
+    },
+    { "name": "--vscode-foreground", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-editorGroup-border", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-settings-headerBorder", "values": [] },
+    { "name": "--vscode-panel-background", "values": [] },
+    { "name": "--vscode-scrollbar-shadow", "values": [] },
+    { "name": "--vscode-settings-textInputBackground", "values": [] },
+    { "name": "--vscode-settings-textInputBorder", "values": [] },
+    { "name": "--vscode-settings-textInputForeground", "values": [] },
+    { "name": "--vscode-input-placeholderForeground", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-editor-background", "values": [] },
+    { "name": "--vscode-editor-foreground", "values": [] },
+    { "name": "--vscode-editor-font-family", "values": [] },
+    { "name": "--vscode-editor-font-size", "values": [] },
+    { "name": "--vscode-editor-font-weight", "values": [] },
+    { "name": "--vscode-editor-inlineValuesForeground", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-scrollbarSlider-background", "values": [] },
+    { "name": "--vscode-scrollbarSlider-hoverBackground", "values": [] },
+    { "name": "--vscode-scrollbarSlider-activeBackground", "values": [] },
+    { "name": "--vscode-settings-textInputBackground", "values": [] },
+    { "name": "--vscode-settings-textInputBorder", "values": [] },
+    { "name": "--vscode-settings-textInputForeground", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-input-placeholderForeground", "values": [] },
+    { "name": "--vscode-button-background", "values": [] },
+    { "name": "--vscode-button-foreground", "values": [] },
+    { "name": "--vscode-button-hoverBackground", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
+    { "name": "--vscode-font-family", "values": [] },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-list-hoverForeground", "values": [] },
+    { "name": "--vscode-list-hoverBackground", "values": [] },
+    { "name": "--vscode-list-inactiveSelectionBackground", "values": [] },
+    { "name": "--vscode-list-inactiveSelectionForeground", "values": [] },
+    { "name": "--vscode-list-activeSelectionBackground", "values": [] },
+    { "name": "--vscode-list-activeSelectionForeground", "values": [] },
+    { "name": "--vscode-list-inactiveSelectionIconForeground", "values": [] },
+    { "name": "--vscode-list-inactiveFocusBackground", "values": [] },
+    { "name": "--vscode-list-inactiveFocusOutline", "values": [] },
+    { "name": "--vscode-list-focusOutline", "values": [] },
+    { "name": "--vscode-tree-inactiveIndentGuidesStroke", "values": [] },
+    { "name": "--vscode-tree-indentGuidesStroke", "values": [] }
+  ],
+  "pseudoElements": []
+}