@vscode-elements/elements 1.13.2-pre.1 → 1.14.1-pre.0

package/dist/vscode-context-menu/vscode-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-context-menu.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport type {\n  VscClickEventDetail,\n  VscodeContextMenuItem,\n} from '../vscode-context-menu-item/vscode-context-menu-item.js';\nimport '../vscode-context-menu-item/index.js';\nimport styles from './vscode-context-menu.styles.js';\n\ninterface MenuItemData {\n  // TODO: make optional\n  label: string;\n  keybinding?: string;\n  value?: string;\n  separator?: boolean;\n  tabindex?: number;\n}\n\nexport type VscContextMenuSelectEvent = CustomEvent<{\n  keybinding: string;\n  label: string;\n  value: string;\n  separator: boolean;\n  tabindex: number;\n}>;\n\n/**\n * @tag vscode-context-menu\n *\n * @fires {VscMenuSelectEvent} vsc-menu-select - Emitted when a menu item is clicked\n *\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-menu-background\n * @cssprop --vscode-menu-border\n * @cssprop --vscode-menu-foreground\n * @cssprop --vscode-widget-shadow\n */\n@customElement('vscode-context-menu')\nexport class VscodeContextMenu extends VscElement {\n  static override styles = styles;\n\n  @property({type: Array, attribute: false})\n  set data(data: MenuItemData[]) {\n    this._data = data;\n\n    const indexes: number[] = [];\n\n    data.forEach((v, i) => {\n      if (!v.separator) {\n        indexes.push(i);\n      }\n    });\n\n    this._clickableItemIndexes = indexes;\n  }\n  get data(): MenuItemData[] {\n    return this._data;\n  }\n\n  /**\n   * By default, the menu closes when an item is clicked. This attribute prevents the menu from closing.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'prevent-close'})\n  preventClose = false;\n\n  @property({type: Boolean, reflect: true})\n  set show(show: boolean) {\n    this._show = show;\n    this._selectedClickableItemIndex = -1;\n\n    if (show) {\n      this.updateComplete.then(() => {\n        if (this._wrapperEl) {\n          this._wrapperEl.focus();\n        }\n\n        requestAnimationFrame(() => {\n          document.addEventListener('click', this._onClickOutsideBound, {\n            once: true,\n          });\n        });\n      });\n    }\n  }\n  get show(): boolean {\n    return this._show;\n  }\n\n  /** @internal */\n  @property({type: Number, reflect: true})\n  override tabIndex = 0;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  /* connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._onClickOutsideBound);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._onClickOutsideBound);\n  } */\n\n  @state()\n  private _selectedClickableItemIndex = -1;\n\n  @state()\n  private _show = false;\n\n  @query('.context-menu')\n  private _wrapperEl!: HTMLDivElement;\n\n  private _data: MenuItemData[] = [];\n\n  private _clickableItemIndexes: number[] = [];\n\n  private _onClickOutside(ev: MouseEvent) {\n    if (!ev.composedPath().includes(this)) {\n      this.show = false;\n    }\n  }\n\n  private _onClickOutsideBound = this._onClickOutside.bind(this);\n\n  private _onKeyDown(ev: KeyboardEvent) {\n    const {key} = ev;\n\n    if (\n      key === 'ArrowUp' ||\n      key === 'ArrowDown' ||\n      key === 'Escape' ||\n      key === 'Enter'\n    ) {\n      ev.preventDefault();\n    }\n\n    switch (key) {\n      case 'ArrowUp':\n        this._handleArrowUp();\n        break;\n      case 'ArrowDown':\n        this._handleArrowDown();\n        break;\n      case 'Escape':\n        this._handleEscape();\n        break;\n      case 'Enter':\n        this._handleEnter();\n        break;\n      default:\n    }\n  }\n\n  private _handleArrowUp() {\n    if (this._selectedClickableItemIndex === 0) {\n      this._selectedClickableItemIndex = this._clickableItemIndexes.length - 1;\n    } else {\n      this._selectedClickableItemIndex -= 1;\n    }\n  }\n\n  private _handleArrowDown() {\n    if (\n      this._selectedClickableItemIndex + 1 <\n      this._clickableItemIndexes.length\n    ) {\n      this._selectedClickableItemIndex += 1;\n    } else {\n      this._selectedClickableItemIndex = 0;\n    }\n  }\n\n  private _handleEscape() {\n    this.show = false;\n    document.removeEventListener('click', this._onClickOutsideBound);\n  }\n\n  private _dispatchSelectEvent(selectedOption: VscodeContextMenuItem) {\n    const {keybinding, label, value, separator, tabindex} = selectedOption;\n\n    this.dispatchEvent(\n      new CustomEvent('vsc-context-menu-select', {\n        detail: {\n          keybinding,\n          label,\n          separator,\n          tabindex,\n          value,\n        },\n      }) as VscContextMenuSelectEvent\n    );\n  }\n\n  private _dispatchLegacySelectEvent(selectedOption: VscodeContextMenuItem) {\n    const {keybinding, label, value, separator, tabindex} = selectedOption;\n    const detail: VscClickEventDetail = {\n      keybinding,\n      label,\n      value,\n      separator,\n      tabindex,\n    };\n\n    /** @deprecated - Renamed to `vsc-context-menu-select` */\n    this.dispatchEvent(\n      new CustomEvent('vsc-select', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _handleEnter() {\n    if (this._selectedClickableItemIndex === -1) {\n      return;\n    }\n\n    const realItemIndex =\n      this._clickableItemIndexes[this._selectedClickableItemIndex];\n    const options = this._wrapperEl.querySelectorAll(\n      'vscode-context-menu-item'\n    );\n    const selectedOption = options[realItemIndex];\n\n    this._dispatchLegacySelectEvent(selectedOption);\n    this._dispatchSelectEvent(selectedOption);\n\n    if (!this.preventClose) {\n      this.show = false;\n      document.removeEventListener('click', this._onClickOutsideBound);\n    }\n  }\n\n  private _onItemClick(event: CustomEvent) {\n    const et = event.currentTarget as VscodeContextMenuItem;\n\n    this._dispatchLegacySelectEvent(et);\n    this._dispatchSelectEvent(et);\n\n    if (!this.preventClose) {\n      this.show = false;\n    }\n  }\n\n  private _onItemMouseOver(event: MouseEvent) {\n    const el = event.target as HTMLElement;\n    const index = el.dataset.index ? +el.dataset.index : -1;\n    const found = this._clickableItemIndexes.findIndex(\n      (item) => item === index\n    );\n\n    if (found !== -1) {\n      this._selectedClickableItemIndex = found;\n    }\n  }\n\n  private _onItemMouseOut() {\n    this._selectedClickableItemIndex = -1;\n  }\n\n  override render(): TemplateResult {\n    if (!this._show) {\n      return html`${nothing}`;\n    }\n\n    const selectedIndex =\n      this._clickableItemIndexes[this._selectedClickableItemIndex];\n\n    return html`\n      <div class=\"context-menu\" tabindex=\"0\">\n        ${this.data\n          ? this.data.map(\n              (\n                {\n                  label = '',\n                  keybinding = '',\n                  value = '',\n                  separator = false,\n                  tabindex = 0,\n                },\n                index\n              ) => html`\n                <vscode-context-menu-item\n                  label=${label}\n                  keybinding=${keybinding}\n                  value=${value}\n                  ?separator=${separator}\n                  ?selected=${index === selectedIndex}\n                  tabindex=${tabindex}\n                  @vsc-click=${this._onItemClick}\n                  @mouseover=${this._onItemMouseOver}\n                  @mouseout=${this._onItemMouseOut}\n                  data-index=${index}\n                ></vscode-context-menu-item>\n              `\n            )\n          : html`<slot></slot>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-context-menu': VscodeContextMenu;\n  }\n\n  interface GlobalEventHandlersEventMap {\n    'vsc-context-menu-select': VscContextMenuSelectEvent;\n  }\n}\n"]}
+{"version":3,"file":"vscode-context-menu.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport type {\n  VscClickEventDetail,\n  VscodeContextMenuItem,\n} from '../vscode-context-menu-item/vscode-context-menu-item.js';\nimport '../vscode-context-menu-item/index.js';\nimport styles from './vscode-context-menu.styles.js';\n\ninterface MenuItemData {\n  // TODO: make optional\n  label: string;\n  keybinding?: string;\n  value?: string;\n  separator?: boolean;\n  tabindex?: number;\n}\n\nexport type VscContextMenuSelectEvent = CustomEvent<{\n  keybinding: string;\n  label: string;\n  value: string;\n  separator: boolean;\n  tabindex: number;\n}>;\n\n/**\n * @tag vscode-context-menu\n *\n * @fires {VscMenuSelectEvent} vsc-menu-select - Emitted when a menu item is clicked\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-menu-background=#1f1f1f]\n * @cssprop [--vscode-menu-border=#454545]\n * @cssprop [--vscode-menu-foreground=#cccccc]\n * @cssprop [--vscode-widget-shadow=rgba(0, 0, 0, 0.36)]\n */\n@customElement('vscode-context-menu')\nexport class VscodeContextMenu extends VscElement {\n  static override styles = styles;\n\n  @property({type: Array, attribute: false})\n  set data(data: MenuItemData[]) {\n    this._data = data;\n\n    const indexes: number[] = [];\n\n    data.forEach((v, i) => {\n      if (!v.separator) {\n        indexes.push(i);\n      }\n    });\n\n    this._clickableItemIndexes = indexes;\n  }\n  get data(): MenuItemData[] {\n    return this._data;\n  }\n\n  /**\n   * By default, the menu closes when an item is clicked. This attribute prevents the menu from closing.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'prevent-close'})\n  preventClose = false;\n\n  @property({type: Boolean, reflect: true})\n  set show(show: boolean) {\n    this._show = show;\n    this._selectedClickableItemIndex = -1;\n\n    if (show) {\n      this.updateComplete.then(() => {\n        if (this._wrapperEl) {\n          this._wrapperEl.focus();\n        }\n\n        requestAnimationFrame(() => {\n          document.addEventListener('click', this._onClickOutsideBound, {\n            once: true,\n          });\n        });\n      });\n    }\n  }\n  get show(): boolean {\n    return this._show;\n  }\n\n  /** @internal */\n  @property({type: Number, reflect: true})\n  override tabIndex = 0;\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  /* connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._onClickOutsideBound);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._onClickOutsideBound);\n  } */\n\n  @state()\n  private _selectedClickableItemIndex = -1;\n\n  @state()\n  private _show = false;\n\n  @query('.context-menu')\n  private _wrapperEl!: HTMLDivElement;\n\n  private _data: MenuItemData[] = [];\n\n  private _clickableItemIndexes: number[] = [];\n\n  private _onClickOutside(ev: MouseEvent) {\n    if (!ev.composedPath().includes(this)) {\n      this.show = false;\n    }\n  }\n\n  private _onClickOutsideBound = this._onClickOutside.bind(this);\n\n  private _onKeyDown(ev: KeyboardEvent) {\n    const {key} = ev;\n\n    if (\n      key === 'ArrowUp' ||\n      key === 'ArrowDown' ||\n      key === 'Escape' ||\n      key === 'Enter'\n    ) {\n      ev.preventDefault();\n    }\n\n    switch (key) {\n      case 'ArrowUp':\n        this._handleArrowUp();\n        break;\n      case 'ArrowDown':\n        this._handleArrowDown();\n        break;\n      case 'Escape':\n        this._handleEscape();\n        break;\n      case 'Enter':\n        this._handleEnter();\n        break;\n      default:\n    }\n  }\n\n  private _handleArrowUp() {\n    if (this._selectedClickableItemIndex === 0) {\n      this._selectedClickableItemIndex = this._clickableItemIndexes.length - 1;\n    } else {\n      this._selectedClickableItemIndex -= 1;\n    }\n  }\n\n  private _handleArrowDown() {\n    if (\n      this._selectedClickableItemIndex + 1 <\n      this._clickableItemIndexes.length\n    ) {\n      this._selectedClickableItemIndex += 1;\n    } else {\n      this._selectedClickableItemIndex = 0;\n    }\n  }\n\n  private _handleEscape() {\n    this.show = false;\n    document.removeEventListener('click', this._onClickOutsideBound);\n  }\n\n  private _dispatchSelectEvent(selectedOption: VscodeContextMenuItem) {\n    const {keybinding, label, value, separator, tabindex} = selectedOption;\n\n    this.dispatchEvent(\n      new CustomEvent('vsc-context-menu-select', {\n        detail: {\n          keybinding,\n          label,\n          separator,\n          tabindex,\n          value,\n        },\n      }) as VscContextMenuSelectEvent\n    );\n  }\n\n  private _dispatchLegacySelectEvent(selectedOption: VscodeContextMenuItem) {\n    const {keybinding, label, value, separator, tabindex} = selectedOption;\n    const detail: VscClickEventDetail = {\n      keybinding,\n      label,\n      value,\n      separator,\n      tabindex,\n    };\n\n    /** @deprecated - Renamed to `vsc-context-menu-select` */\n    this.dispatchEvent(\n      new CustomEvent('vsc-select', {\n        detail,\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _handleEnter() {\n    if (this._selectedClickableItemIndex === -1) {\n      return;\n    }\n\n    const realItemIndex =\n      this._clickableItemIndexes[this._selectedClickableItemIndex];\n    const options = this._wrapperEl.querySelectorAll(\n      'vscode-context-menu-item'\n    );\n    const selectedOption = options[realItemIndex];\n\n    this._dispatchLegacySelectEvent(selectedOption);\n    this._dispatchSelectEvent(selectedOption);\n\n    if (!this.preventClose) {\n      this.show = false;\n      document.removeEventListener('click', this._onClickOutsideBound);\n    }\n  }\n\n  private _onItemClick(event: CustomEvent) {\n    const et = event.currentTarget as VscodeContextMenuItem;\n\n    this._dispatchLegacySelectEvent(et);\n    this._dispatchSelectEvent(et);\n\n    if (!this.preventClose) {\n      this.show = false;\n    }\n  }\n\n  private _onItemMouseOver(event: MouseEvent) {\n    const el = event.target as HTMLElement;\n    const index = el.dataset.index ? +el.dataset.index : -1;\n    const found = this._clickableItemIndexes.findIndex(\n      (item) => item === index\n    );\n\n    if (found !== -1) {\n      this._selectedClickableItemIndex = found;\n    }\n  }\n\n  private _onItemMouseOut() {\n    this._selectedClickableItemIndex = -1;\n  }\n\n  override render(): TemplateResult {\n    if (!this._show) {\n      return html`${nothing}`;\n    }\n\n    const selectedIndex =\n      this._clickableItemIndexes[this._selectedClickableItemIndex];\n\n    return html`\n      <div class=\"context-menu\" tabindex=\"0\">\n        ${this.data\n          ? this.data.map(\n              (\n                {\n                  label = '',\n                  keybinding = '',\n                  value = '',\n                  separator = false,\n                  tabindex = 0,\n                },\n                index\n              ) => html`\n                <vscode-context-menu-item\n                  label=${label}\n                  keybinding=${keybinding}\n                  value=${value}\n                  ?separator=${separator}\n                  ?selected=${index === selectedIndex}\n                  tabindex=${tabindex}\n                  @vsc-click=${this._onItemClick}\n                  @mouseover=${this._onItemMouseOver}\n                  @mouseout=${this._onItemMouseOut}\n                  data-index=${index}\n                ></vscode-context-menu-item>\n              `\n            )\n          : html`<slot></slot>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-context-menu': VscodeContextMenu;\n  }\n\n  interface GlobalEventHandlersEventMap {\n    'vsc-context-menu-select': VscContextMenuSelectEvent;\n  }\n}\n"]}

package/dist/vscode-context-menu/vscode-context-menu.styles.js

@@ -5,21 +5,21 @@ const styles = [
     css `
     :host {
       display: block;
-      font-family: var(--vscode-font-family);
-      font-size: var(--vscode-font-size);
-      font-weight: var(--vscode-font-weight);
+      font-family: var(--vscode-font-family, sans-serif);
+      font-size: var(--vscode-font-size, 13px);
+      font-weight: var(--vscode-font-weight, normal);
       line-height: 1.4em;
       position: relative;
     }
 
     .context-menu {
-      background-color: var(--vscode-menu-background);
-      border-color: var(--vscode-menu-border, var(--vscode-menu-background));
+      background-color: var(--vscode-menu-background, #1f1f1f);
+      border-color: var(--vscode-menu-border, #454545);
       border-radius: 5px;
       border-style: solid;
       border-width: 1px;
-      box-shadow: 0 2px 8px var(--vscode-widget-shadow);
-      color: var(--vscode-menu-foreground);
+      box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));
+      color: var(--vscode-menu-foreground, #cccccc);
       padding: 4px 0;
       white-space: nowrap;
     }

package/dist/vscode-context-menu/vscode-context-menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-context-menu.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      display: block;\n      font-family: var(--vscode-font-family);\n      font-size: var(--vscode-font-size);\n      font-weight: var(--vscode-font-weight);\n      line-height: 1.4em;\n      position: relative;\n    }\n\n    .context-menu {\n      background-color: var(--vscode-menu-background);\n      border-color: var(--vscode-menu-border, var(--vscode-menu-background));\n      border-radius: 5px;\n      border-style: solid;\n      border-width: 1px;\n      box-shadow: 0 2px 8px var(--vscode-widget-shadow);\n      color: var(--vscode-menu-foreground);\n      padding: 4px 0;\n      white-space: nowrap;\n    }\n\n    .context-menu:focus {\n      outline: 0;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-context-menu.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      display: block;\n      font-family: var(--vscode-font-family, sans-serif);\n      font-size: var(--vscode-font-size, 13px);\n      font-weight: var(--vscode-font-weight, normal);\n      line-height: 1.4em;\n      position: relative;\n    }\n\n    .context-menu {\n      background-color: var(--vscode-menu-background, #1f1f1f);\n      border-color: var(--vscode-menu-border, #454545);\n      border-radius: 5px;\n      border-style: solid;\n      border-width: 1px;\n      box-shadow: 0 2px 8px var(--vscode-widget-shadow, rgba(0, 0, 0, 0.36));\n      color: var(--vscode-menu-foreground, #cccccc);\n      padding: 4px 0;\n      white-space: nowrap;\n    }\n\n    .context-menu:focus {\n      outline: 0;\n    }\n  `,\n];\n\nexport default styles;\n"]}

package/dist/vscode-context-menu-item/vscode-context-menu-item.d.ts

@@ -12,15 +12,15 @@ export interface VscClickEventDetail {
  *
  * Child component of [ContextMenu](/components/context-menu/).
  *
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-menu-background
- * @cssprop [--vscode-menu-selectionBorder=var(--vscode-menu-selectionBackground)]
- * @cssprop --vscode-menu-foreground
- * @cssprop --vscode-menu-selectionBackground
- * @cssprop --vscode-menu-selectionForeground
- * @cssprop --vscode-menu-separatorBackground
+ * @cssprop [--vscode-font-family=sans-serif]
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-menu-background=#1f1f1f]
+ * @cssprop [--vscode-menu-selectionBorder=transparent]
+ * @cssprop [--vscode-menu-foreground=#cccccc]
+ * @cssprop [--vscode-menu-selectionBackground=#0078d4]
+ * @cssprop [--vscode-menu-selectionForeground=#ffffff]
+ * @cssprop [--vscode-menu-separatorBackground=#454545]
  */
 export declare class VscodeContextMenuItem extends VscElement {
     static styles: import("lit").CSSResultGroup;

package/dist/vscode-context-menu-item/vscode-context-menu-item.js

@@ -13,15 +13,15 @@ import styles from './vscode-context-menu-item.styles.js';
  *
  * Child component of [ContextMenu](/components/context-menu/).
  *
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-menu-background
- * @cssprop [--vscode-menu-selectionBorder=var(--vscode-menu-selectionBackground)]
- * @cssprop --vscode-menu-foreground
- * @cssprop --vscode-menu-selectionBackground
- * @cssprop --vscode-menu-selectionForeground
- * @cssprop --vscode-menu-separatorBackground
+ * @cssprop [--vscode-font-family=sans-serif]
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-menu-background=#1f1f1f]
+ * @cssprop [--vscode-menu-selectionBorder=transparent]
+ * @cssprop [--vscode-menu-foreground=#cccccc]
+ * @cssprop [--vscode-menu-selectionBackground=#0078d4]
+ * @cssprop [--vscode-menu-selectionForeground=#ffffff]
+ * @cssprop [--vscode-menu-separatorBackground=#454545]
  */
 let VscodeContextMenuItem = class VscodeContextMenuItem extends VscElement {
     constructor() {

package/dist/vscode-context-menu-item/vscode-context-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-context-menu-item.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,sCAAsC,CAAC;AAU1D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAIL,UAAK,GAAG,EAAE,CAAC;QAGX,eAAU,GAAG,EAAE,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,KAAK,CAAC;QAGlB,aAAQ,GAAG,CAAC,CAAC;IAyCf,CAAC;IAvCS,WAAW;QACjB,gBAAgB;QAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,WAAW,EAAE;YAChD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;gBAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;WAIH;YACH,CAAC,CAAC,IAAI,CAAA;;0BAEY,IAAI,CAAC,WAAW;kBACxB,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS;gBAChD,CAAC,CAAC,OAAO;kBACT,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,UAAU,SAAS;gBAC1D,CAAC,CAAC,OAAO;;;WAGhB;KACN,CAAC;IACJ,CAAC;;AAvDe,4BAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yDACT;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wDACvB;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uDACZ;AAhBF,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAyDjC","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-context-menu-item.styles.js';\n\nexport interface VscClickEventDetail {\n  label: string;\n  keybinding: string;\n  value: string;\n  separator: boolean;\n  tabindex: number;\n}\n\n/**\n * @tag vscode-context-menu-item\n *\n * Child component of [ContextMenu](/components/context-menu/).\n *\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-menu-background\n * @cssprop [--vscode-menu-selectionBorder=var(--vscode-menu-selectionBackground)]\n * @cssprop --vscode-menu-foreground\n * @cssprop --vscode-menu-selectionBackground\n * @cssprop --vscode-menu-selectionForeground\n * @cssprop --vscode-menu-separatorBackground\n */\n@customElement('vscode-context-menu-item')\nexport class VscodeContextMenuItem extends VscElement {\n  static override styles = styles;\n\n  @property({type: String})\n  label = '';\n\n  @property({type: String})\n  keybinding = '';\n\n  @property({type: String})\n  value = '';\n\n  @property({type: Boolean, reflect: true})\n  separator = false;\n\n  @property({type: Number})\n  tabindex = 0;\n\n  private onItemClick() {\n    /** @internal */\n    this.dispatchEvent(\n      new CustomEvent<VscClickEventDetail>('vsc-click', {\n        detail: {\n          label: this.label,\n          keybinding: this.keybinding,\n          value: this.value || this.label,\n          separator: this.separator,\n          tabindex: this.tabindex,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return html`\n      ${this.separator\n        ? html`\n            <div class=\"context-menu-item separator\">\n              <span class=\"ruler\"></span>\n            </div>\n          `\n        : html`\n            <div class=\"context-menu-item\">\n              <a @click=${this.onItemClick}>\n                ${this.label\n                  ? html`<span class=\"label\">${this.label}</span>`\n                  : nothing}\n                ${this.keybinding\n                  ? html`<span class=\"keybinding\">${this.keybinding}</span>`\n                  : nothing}\n              </a>\n            </div>\n          `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-context-menu-item': VscodeContextMenuItem;\n  }\n}\n"]}
+{"version":3,"file":"vscode-context-menu-item.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,sCAAsC,CAAC;AAU1D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAIL,UAAK,GAAG,EAAE,CAAC;QAGX,eAAU,GAAG,EAAE,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAG,KAAK,CAAC;QAGlB,aAAQ,GAAG,CAAC,CAAC;IAyCf,CAAC;IAvCS,WAAW;QACjB,gBAAgB;QAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,WAAW,EAAE;YAChD,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;gBAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;WAIH;YACH,CAAC,CAAC,IAAI,CAAA;;0BAEY,IAAI,CAAC,WAAW;kBACxB,IAAI,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS;gBAChD,CAAC,CAAC,OAAO;kBACT,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,UAAU,SAAS;gBAC1D,CAAC,CAAC,OAAO;;;WAGhB;KACN,CAAC;IACJ,CAAC;;AAvDe,4BAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yDACT;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACd;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wDACvB;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uDACZ;AAhBF,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAyDjC","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-context-menu-item.styles.js';\n\nexport interface VscClickEventDetail {\n  label: string;\n  keybinding: string;\n  value: string;\n  separator: boolean;\n  tabindex: number;\n}\n\n/**\n * @tag vscode-context-menu-item\n *\n * Child component of [ContextMenu](/components/context-menu/).\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-menu-background=#1f1f1f]\n * @cssprop [--vscode-menu-selectionBorder=transparent]\n * @cssprop [--vscode-menu-foreground=#cccccc]\n * @cssprop [--vscode-menu-selectionBackground=#0078d4]\n * @cssprop [--vscode-menu-selectionForeground=#ffffff]\n * @cssprop [--vscode-menu-separatorBackground=#454545]\n */\n@customElement('vscode-context-menu-item')\nexport class VscodeContextMenuItem extends VscElement {\n  static override styles = styles;\n\n  @property({type: String})\n  label = '';\n\n  @property({type: String})\n  keybinding = '';\n\n  @property({type: String})\n  value = '';\n\n  @property({type: Boolean, reflect: true})\n  separator = false;\n\n  @property({type: Number})\n  tabindex = 0;\n\n  private onItemClick() {\n    /** @internal */\n    this.dispatchEvent(\n      new CustomEvent<VscClickEventDetail>('vsc-click', {\n        detail: {\n          label: this.label,\n          keybinding: this.keybinding,\n          value: this.value || this.label,\n          separator: this.separator,\n          tabindex: this.tabindex,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render(): TemplateResult {\n    return html`\n      ${this.separator\n        ? html`\n            <div class=\"context-menu-item separator\">\n              <span class=\"ruler\"></span>\n            </div>\n          `\n        : html`\n            <div class=\"context-menu-item\">\n              <a @click=${this.onItemClick}>\n                ${this.label\n                  ? html`<span class=\"label\">${this.label}</span>`\n                  : nothing}\n                ${this.keybinding\n                  ? html`<span class=\"keybinding\">${this.keybinding}</span>`\n                  : nothing}\n              </a>\n            </div>\n          `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-context-menu-item': VscodeContextMenuItem;\n  }\n}\n"]}

package/dist/vscode-context-menu-item/vscode-context-menu-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-context-menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cA2Eb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"vscode-context-menu-item.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cAwEb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/vscode-context-menu-item/vscode-context-menu-item.styles.js

@@ -5,24 +5,24 @@ const styles = [
     css `
     :host {
       display: block;
-      font-family: var(--vscode-font-family);
-      font-size: var(--vscode-font-size);
-      font-weight: var(--vscode-font-weight);
+      font-family: var(--vscode-font-family, sans-serif);
+      font-size: var(--vscode-font-size, 13px);
+      font-weight: var(--vscode-font-weight, normal);
       line-height: 1.4em;
       outline: none;
       position: relative;
     }
 
     .context-menu-item {
-      background-color: var(--vscode-menu-background);
-      color: var(--vscode-menu-foreground);
+      background-color: var(--vscode-menu-background, #1f1f1f);
+      color: var(--vscode-menu-foreground, #cccccc);
       display: flex;
       user-select: none;
       white-space: nowrap;
     }
 
     .ruler {
-      border-bottom: 1px solid var(--vscode-menu-separatorBackground);
+      border-bottom: 1px solid var(--vscode-menu-separatorBackground, #454545);
       display: block;
       margin: 0 0 4px;
       padding-top: 4px;
@@ -36,7 +36,7 @@ const styles = [
       border-style: solid;
       border-width: 1px;
       box-sizing: border-box;
-      color: var(--vscode-menu-foreground);
+      color: var(--vscode-menu-foreground, #cccccc);
       cursor: pointer;
       display: flex;
       flex: 1 1 auto;
@@ -49,12 +49,9 @@ const styles = [
     }
 
     :host([selected]) .context-menu-item a {
-      background-color: var(--vscode-menu-selectionBackground);
-      border-color: var(
-        --vscode-menu-selectionBorder,
-        var(--vscode-menu-selectionBackground)
-      );
-      color: var(--vscode-menu-selectionForeground);
+      background-color: var(--vscode-menu-selectionBackground, #0078d4);
+      border-color: var(--vscode-menu-selectionBorder, transparent);
+      color: var(--vscode-menu-selectionForeground, #ffffff);
     }
 
     .label {

package/dist/vscode-context-menu-item/vscode-context-menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-context-menu-item.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      display: block;\n      font-family: var(--vscode-font-family);\n      font-size: var(--vscode-font-size);\n      font-weight: var(--vscode-font-weight);\n      line-height: 1.4em;\n      outline: none;\n      position: relative;\n    }\n\n    .context-menu-item {\n      background-color: var(--vscode-menu-background);\n      color: var(--vscode-menu-foreground);\n      display: flex;\n      user-select: none;\n      white-space: nowrap;\n    }\n\n    .ruler {\n      border-bottom: 1px solid var(--vscode-menu-separatorBackground);\n      display: block;\n      margin: 0 0 4px;\n      padding-top: 4px;\n      width: 100%;\n    }\n\n    .context-menu-item a {\n      align-items: center;\n      border-color: transparent;\n      border-radius: 3px;\n      border-style: solid;\n      border-width: 1px;\n      box-sizing: border-box;\n      color: var(--vscode-menu-foreground);\n      cursor: pointer;\n      display: flex;\n      flex: 1 1 auto;\n      height: 2em;\n      margin-left: 4px;\n      margin-right: 4px;\n      outline: none;\n      position: relative;\n      text-decoration: inherit;\n    }\n\n    :host([selected]) .context-menu-item a {\n      background-color: var(--vscode-menu-selectionBackground);\n      border-color: var(\n        --vscode-menu-selectionBorder,\n        var(--vscode-menu-selectionBackground)\n      );\n      color: var(--vscode-menu-selectionForeground);\n    }\n\n    .label {\n      background: none;\n      display: flex;\n      flex: 1 1 auto;\n      font-size: 12px;\n      line-height: 1;\n      padding: 0 22px;\n      text-decoration: none;\n    }\n\n    .keybinding {\n      display: block;\n      flex: 2 1 auto;\n      line-height: 1;\n      padding: 0 22px;\n      text-align: right;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-context-menu-item.styles.js","sourceRoot":"","sources":["../../src/vscode-context-menu-item/vscode-context-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      display: block;\n      font-family: var(--vscode-font-family, sans-serif);\n      font-size: var(--vscode-font-size, 13px);\n      font-weight: var(--vscode-font-weight, normal);\n      line-height: 1.4em;\n      outline: none;\n      position: relative;\n    }\n\n    .context-menu-item {\n      background-color: var(--vscode-menu-background, #1f1f1f);\n      color: var(--vscode-menu-foreground, #cccccc);\n      display: flex;\n      user-select: none;\n      white-space: nowrap;\n    }\n\n    .ruler {\n      border-bottom: 1px solid var(--vscode-menu-separatorBackground, #454545);\n      display: block;\n      margin: 0 0 4px;\n      padding-top: 4px;\n      width: 100%;\n    }\n\n    .context-menu-item a {\n      align-items: center;\n      border-color: transparent;\n      border-radius: 3px;\n      border-style: solid;\n      border-width: 1px;\n      box-sizing: border-box;\n      color: var(--vscode-menu-foreground, #cccccc);\n      cursor: pointer;\n      display: flex;\n      flex: 1 1 auto;\n      height: 2em;\n      margin-left: 4px;\n      margin-right: 4px;\n      outline: none;\n      position: relative;\n      text-decoration: inherit;\n    }\n\n    :host([selected]) .context-menu-item a {\n      background-color: var(--vscode-menu-selectionBackground, #0078d4);\n      border-color: var(--vscode-menu-selectionBorder, transparent);\n      color: var(--vscode-menu-selectionForeground, #ffffff);\n    }\n\n    .label {\n      background: none;\n      display: flex;\n      flex: 1 1 auto;\n      font-size: 12px;\n      line-height: 1;\n      padding: 0 22px;\n      text-decoration: none;\n    }\n\n    .keybinding {\n      display: block;\n      flex: 2 1 auto;\n      line-height: 1;\n      padding: 0 22px;\n      text-align: right;\n    }\n  `,\n];\n\nexport default styles;\n"]}

package/dist/vscode-divider/vscode-divider.d.ts

@@ -2,6 +2,8 @@ import { TemplateResult } from 'lit';
 import { VscElement } from '../includes/VscElement.js';
 /**
  * @tag vscode-divider
+ *
+ * @cssprop [--vscode-foreground=#cccccc]
  */
 export declare class VscodeDivider extends VscElement {
     static styles: import("lit").CSSResultGroup;

package/dist/vscode-divider/vscode-divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-divider.d.ts","sourceRoot":"","sources":["../../src/vscode-divider/vscode-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAO,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAU;IAGvB,IAAI,EAAE,WAAW,GAAG,cAAc,CAAe;IAEjD,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"vscode-divider.d.ts","sourceRoot":"","sources":["../../src/vscode-divider/vscode-divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAO,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE;;;;GAIG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,+BAAU;IAGvB,IAAI,EAAE,WAAW,GAAG,cAAc,CAAe;IAEjD,MAAM,IAAI,cAAc;CAGlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/vscode-divider/vscode-divider.js

@@ -10,6 +10,8 @@ import { customElement, VscElement } from '../includes/VscElement.js';
 import styles from './vscode-divider.styles.js';
 /**
  * @tag vscode-divider
+ *
+ * @cssprop [--vscode-foreground=#cccccc]
  */
 let VscodeDivider = class VscodeDivider extends VscElement {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-divider.js","sourceRoot":"","sources":["../../src/vscode-divider/vscode-divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAiB,IAAI,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAII,SAAI,GAAiC,WAAW,CAAC;IAK5D,CAAC;IAHU,MAAM;QACb,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;;AAPe,oBAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;2CACgC;AAJ/C,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CASzB","sourcesContent":["import {TemplateResult, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-divider.styles.js';\n\n/**\n * @tag vscode-divider\n */\n@customElement('vscode-divider')\nexport class VscodeDivider extends VscElement {\n  static override styles = styles;\n\n  @property({reflect: true})\n  override role: 'separator' | 'presentation' = 'separator';\n\n  override render(): TemplateResult {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-divider': VscodeDivider;\n  }\n}\n"]}
+{"version":3,"file":"vscode-divider.js","sourceRoot":"","sources":["../../src/vscode-divider/vscode-divider.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAiB,IAAI,EAAC,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD;;;;GAIG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAII,SAAI,GAAiC,WAAW,CAAC;IAK5D,CAAC;IAHU,MAAM;QACb,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;;AAPe,oBAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;2CACgC;AAJ/C,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CASzB","sourcesContent":["import {TemplateResult, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-divider.styles.js';\n\n/**\n * @tag vscode-divider\n *\n * @cssprop [--vscode-foreground=#cccccc]\n */\n@customElement('vscode-divider')\nexport class VscodeDivider extends VscElement {\n  static override styles = styles;\n\n  @property({reflect: true})\n  override role: 'separator' | 'presentation' = 'separator';\n\n  override render(): TemplateResult {\n    return html``;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-divider': VscodeDivider;\n  }\n}\n"]}

package/dist/vscode-divider/vscode-divider.styles.js

@@ -4,7 +4,7 @@ const styles = [
     defaultStyles,
     css `
     :host {
-      background-color: var(--vscode-foreground);
+      background-color: var(--vscode-foreground, #cccccc);
       display: block;
       height: 1px;
       margin-bottom: 10px;

package/dist/vscode-divider/vscode-divider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-divider.styles.js","sourceRoot":"","sources":["../../src/vscode-divider/vscode-divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;GASF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      background-color: var(--vscode-foreground);\n      display: block;\n      height: 1px;\n      margin-bottom: 10px;\n      margin-top: 10px;\n      opacity: 0.4;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-divider.styles.js","sourceRoot":"","sources":["../../src/vscode-divider/vscode-divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;GASF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      background-color: var(--vscode-foreground, #cccccc);\n      display: block;\n      height: 1px;\n      margin-bottom: 10px;\n      margin-top: 10px;\n      opacity: 0.4;\n    }\n  `,\n];\n\nexport default styles;\n"]}

package/dist/vscode-icon/vscode-icon.d.ts

@@ -7,10 +7,10 @@ import { VscElement } from '../includes/VscElement.js';
  *
  * @tag vscode-icon
  *
- * @cssprop --vscode-icon-foreground
- * @cssprop --vscode-toolbar-hoverBackground - Hover state background color in `active-icon` mode
- * @cssprop --vscode-toolbar-activeBackground - Active state background color in `active-icon` mode
- * @cssprop --vscode-focusBorder
+ * @cssprop [--vscode-icon-foreground=#cccccc]
+ * @cssprop [--vscode-toolbar-hoverBackground=rgba(90, 93, 94, 0.31)] - Hover state background color in `active-icon` mode
+ * @cssprop [--vscode-toolbar-activeBackground=rgba(99, 102, 103, 0.31)] - Active state background color in `active-icon` mode
+ * @cssprop [--vscode-focusBorder=#0078d4]
  */
 export declare class VscodeIcon extends VscElement {
     static styles: import("lit").CSSResultGroup;

package/dist/vscode-icon/vscode-icon.js

@@ -19,10 +19,10 @@ import styles from './vscode-icon.styles.js';
  *
  * @tag vscode-icon
  *
- * @cssprop --vscode-icon-foreground
- * @cssprop --vscode-toolbar-hoverBackground - Hover state background color in `active-icon` mode
- * @cssprop --vscode-toolbar-activeBackground - Active state background color in `active-icon` mode
- * @cssprop --vscode-focusBorder
+ * @cssprop [--vscode-icon-foreground=#cccccc]
+ * @cssprop [--vscode-toolbar-hoverBackground=rgba(90, 93, 94, 0.31)] - Hover state background color in `active-icon` mode
+ * @cssprop [--vscode-toolbar-activeBackground=rgba(99, 102, 103, 0.31)] - Active state background color in `active-icon` mode
+ * @cssprop [--vscode-focusBorder=#0078d4]
  */
 let VscodeIcon = VscodeIcon_1 = class VscodeIcon extends VscElement {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-icon.js","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-icon.styles.js';\n\n/**\n * Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).\n * In \"action-icon\" mode it behaves like a button. In this case, it is\n * recommended that a meaningful label is specified with the `label` property.\n *\n * @tag vscode-icon\n *\n * @cssprop --vscode-icon-foreground\n * @cssprop --vscode-toolbar-hoverBackground - Hover state background color in `active-icon` mode\n * @cssprop --vscode-toolbar-activeBackground - Active state background color in `active-icon` mode\n * @cssprop --vscode-focusBorder\n */\n@customElement('vscode-icon')\nexport class VscodeIcon extends VscElement {\n  static override styles = styles;\n  /**\n   * Set a meaningful label in `action-icon` mode for the screen readers\n   */\n  @property()\n  label = '';\n\n  /**\n   * [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) icon name.\n   */\n  @property({type: String})\n  name = '';\n\n  /**\n   * Icon size in pixels\n   */\n  @property({type: Number})\n  size = 16;\n\n  /**\n   * Enable rotation animation\n   */\n  @property({type: Boolean, reflect: true})\n  spin = false;\n\n  /**\n   * Animation duration in seconds\n   */\n  @property({type: Number, attribute: 'spin-duration'})\n  spinDuration = 1.5;\n\n  /**\n   * Behaves like a button\n   */\n  @property({type: Boolean, reflect: true, attribute: 'action-icon'})\n  actionIcon = false;\n\n  private static stylesheetHref: string | undefined = '';\n\n  private static nonce: string | undefined = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    const {href, nonce} = this._getStylesheetConfig();\n\n    VscodeIcon.stylesheetHref = href;\n    VscodeIcon.nonce = nonce;\n  }\n\n  /**\n   * For using web fonts in web components, the font stylesheet must be included\n   * twice: on the page and in the web component. This function looks for the\n   * font stylesheet on the page and returns the stylesheet URL and the nonce\n   * id.\n   */\n  private _getStylesheetConfig(): {\n    href: string | undefined;\n    nonce: string | undefined;\n  } {\n    const linkElement = document.getElementById('vscode-codicon-stylesheet');\n    const href = linkElement?.getAttribute('href') || undefined;\n    const nonce = linkElement?.nonce || undefined;\n\n    if (!linkElement) {\n      let msg =\n        '[VSCode Elements] To use the Icon component, the codicons.css file must be included in the page with the id `vscode-codicon-stylesheet`! ';\n      msg +=\n        'See https://vscode-elements.github.io/components/icon/ for more details.';\n\n      console.warn(msg);\n    }\n\n    return {nonce, href};\n  }\n\n  private _onButtonClick = (ev: MouseEvent) => {\n    this.dispatchEvent(\n      new CustomEvent('vsc-click', {detail: {originalEvent: ev}})\n    );\n  };\n\n  override render(): TemplateResult {\n    const {stylesheetHref, nonce} = VscodeIcon;\n\n    const content = html`<span\n      class=${classMap({\n        codicon: true,\n        ['codicon-' + this.name]: true,\n        spin: this.spin,\n      })}\n      .style=${stylePropertyMap({\n        animationDuration: String(this.spinDuration) + 's',\n        fontSize: this.size + 'px',\n        height: this.size + 'px',\n        width: this.size + 'px',\n      })}\n    ></span>`;\n\n    const wrapped = this.actionIcon\n      ? html` <button\n          class=\"button\"\n          @click=${this._onButtonClick}\n          aria-label=${this.label}\n        >\n          ${content}\n        </button>`\n      : html` <span class=\"icon\" aria-hidden=\"true\" role=\"presentation\"\n          >${content}</span\n        >`;\n\n    return html`\n      <link\n        rel=\"stylesheet\"\n        href=${ifDefined(stylesheetHref)}\n        nonce=${ifDefined(nonce)}\n      >\n      ${wrapped}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-icon': VscodeIcon;\n  }\n}\n"]}
+{"version":3,"file":"vscode-icon.js","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-icon.styles.js';\n\n/**\n * Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).\n * In \"action-icon\" mode it behaves like a button. In this case, it is\n * recommended that a meaningful label is specified with the `label` property.\n *\n * @tag vscode-icon\n *\n * @cssprop [--vscode-icon-foreground=#cccccc]\n * @cssprop [--vscode-toolbar-hoverBackground=rgba(90, 93, 94, 0.31)] - Hover state background color in `active-icon` mode\n * @cssprop [--vscode-toolbar-activeBackground=rgba(99, 102, 103, 0.31)] - Active state background color in `active-icon` mode\n * @cssprop [--vscode-focusBorder=#0078d4]\n */\n@customElement('vscode-icon')\nexport class VscodeIcon extends VscElement {\n  static override styles = styles;\n  /**\n   * Set a meaningful label in `action-icon` mode for the screen readers\n   */\n  @property()\n  label = '';\n\n  /**\n   * [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) icon name.\n   */\n  @property({type: String})\n  name = '';\n\n  /**\n   * Icon size in pixels\n   */\n  @property({type: Number})\n  size = 16;\n\n  /**\n   * Enable rotation animation\n   */\n  @property({type: Boolean, reflect: true})\n  spin = false;\n\n  /**\n   * Animation duration in seconds\n   */\n  @property({type: Number, attribute: 'spin-duration'})\n  spinDuration = 1.5;\n\n  /**\n   * Behaves like a button\n   */\n  @property({type: Boolean, reflect: true, attribute: 'action-icon'})\n  actionIcon = false;\n\n  private static stylesheetHref: string | undefined = '';\n\n  private static nonce: string | undefined = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    const {href, nonce} = this._getStylesheetConfig();\n\n    VscodeIcon.stylesheetHref = href;\n    VscodeIcon.nonce = nonce;\n  }\n\n  /**\n   * For using web fonts in web components, the font stylesheet must be included\n   * twice: on the page and in the web component. This function looks for the\n   * font stylesheet on the page and returns the stylesheet URL and the nonce\n   * id.\n   */\n  private _getStylesheetConfig(): {\n    href: string | undefined;\n    nonce: string | undefined;\n  } {\n    const linkElement = document.getElementById('vscode-codicon-stylesheet');\n    const href = linkElement?.getAttribute('href') || undefined;\n    const nonce = linkElement?.nonce || undefined;\n\n    if (!linkElement) {\n      let msg =\n        '[VSCode Elements] To use the Icon component, the codicons.css file must be included in the page with the id `vscode-codicon-stylesheet`! ';\n      msg +=\n        'See https://vscode-elements.github.io/components/icon/ for more details.';\n\n      console.warn(msg);\n    }\n\n    return {nonce, href};\n  }\n\n  private _onButtonClick = (ev: MouseEvent) => {\n    this.dispatchEvent(\n      new CustomEvent('vsc-click', {detail: {originalEvent: ev}})\n    );\n  };\n\n  override render(): TemplateResult {\n    const {stylesheetHref, nonce} = VscodeIcon;\n\n    const content = html`<span\n      class=${classMap({\n        codicon: true,\n        ['codicon-' + this.name]: true,\n        spin: this.spin,\n      })}\n      .style=${stylePropertyMap({\n        animationDuration: String(this.spinDuration) + 's',\n        fontSize: this.size + 'px',\n        height: this.size + 'px',\n        width: this.size + 'px',\n      })}\n    ></span>`;\n\n    const wrapped = this.actionIcon\n      ? html` <button\n          class=\"button\"\n          @click=${this._onButtonClick}\n          aria-label=${this.label}\n        >\n          ${content}\n        </button>`\n      : html` <span class=\"icon\" aria-hidden=\"true\" role=\"presentation\"\n          >${content}</span\n        >`;\n\n    return html`\n      <link\n        rel=\"stylesheet\"\n        href=${ifDefined(stylesheetHref)}\n        nonce=${ifDefined(nonce)}\n      >\n      ${wrapped}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-icon': VscodeIcon;\n  }\n}\n"]}

package/dist/vscode-icon/vscode-icon.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-icon.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cAyDb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"vscode-icon.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cA+Db,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/vscode-icon/vscode-icon.styles.js

@@ -4,7 +4,7 @@ const styles = [
     defaultStyles,
     css `
     :host {
-      color: var(--vscode-icon-foreground);
+      color: var(--vscode-icon-foreground, #cccccc);
       display: inline-block;
     }
 
@@ -30,11 +30,17 @@ const styles = [
     }
 
     .button:hover {
-      background-color: var(--vscode-toolbar-hoverBackground);
+      background-color: var(
+        --vscode-toolbar-hoverBackground,
+        rgba(90, 93, 94, 0.31)
+      );
     }
 
     .button:active {
-      background-color: var(--vscode-toolbar-activeBackground);
+      background-color: var(
+        --vscode-toolbar-activeBackground,
+        rgba(99, 102, 103, 0.31)
+      );
     }
 
     .button:focus {
@@ -42,7 +48,7 @@ const styles = [
     }
 
     .button:focus-visible {
-      border-color: var(--vscode-focusBorder);
+      border-color: var(--vscode-focusBorder, #0078d4);
     }
 
     @keyframes icon-spin {

package/dist/vscode-icon/vscode-icon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-icon.styles.js","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      color: var(--vscode-icon-foreground);\n      display: inline-block;\n    }\n\n    .codicon[class*='codicon-'] {\n      display: block;\n    }\n\n    .icon,\n    .button {\n      background-color: transparent;\n      display: block;\n      padding: 0;\n    }\n\n    .button {\n      border-color: transparent;\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 5px;\n      color: currentColor;\n      cursor: pointer;\n      padding: 2px;\n    }\n\n    .button:hover {\n      background-color: var(--vscode-toolbar-hoverBackground);\n    }\n\n    .button:active {\n      background-color: var(--vscode-toolbar-activeBackground);\n    }\n\n    .button:focus {\n      outline: none;\n    }\n\n    .button:focus-visible {\n      border-color: var(--vscode-focusBorder);\n    }\n\n    @keyframes icon-spin {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    .spin {\n      animation-name: icon-spin;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-icon.styles.js","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      color: var(--vscode-icon-foreground, #cccccc);\n      display: inline-block;\n    }\n\n    .codicon[class*='codicon-'] {\n      display: block;\n    }\n\n    .icon,\n    .button {\n      background-color: transparent;\n      display: block;\n      padding: 0;\n    }\n\n    .button {\n      border-color: transparent;\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 5px;\n      color: currentColor;\n      cursor: pointer;\n      padding: 2px;\n    }\n\n    .button:hover {\n      background-color: var(\n        --vscode-toolbar-hoverBackground,\n        rgba(90, 93, 94, 0.31)\n      );\n    }\n\n    .button:active {\n      background-color: var(\n        --vscode-toolbar-activeBackground,\n        rgba(99, 102, 103, 0.31)\n      );\n    }\n\n    .button:focus {\n      outline: none;\n    }\n\n    .button:focus-visible {\n      border-color: var(--vscode-focusBorder, #0078d4);\n    }\n\n    @keyframes icon-spin {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    .spin {\n      animation-name: icon-spin;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n  `,\n];\n\nexport default styles;\n"]}

package/dist/vscode-multi-select/vscode-multi-select.d.ts

@@ -14,27 +14,27 @@ import { AssociatedFormControl } from '../includes/AssociatedFormControl.js';
  * @attr name - Name which is used as a variable name in the data of the form-container.
  *
  * @cssprop [--dropdown-z-index=2]
- * @cssprop --vscode-badge-background
- * @cssprop --vscode-badge-foreground
- * @cssprop --vscode-settings-dropdownBorder
- * @cssprop --vscode-settings-checkboxBackground
- * @cssprop --vscode-settings-dropdownBackground
- * @cssprop --vscode-settings-dropdownListBorder
- * @cssprop --vscode-focusBorder
- * @cssprop --vscode-foreground
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-list-activeSelectionBackground
- * @cssprop --vscode-list-activeSelectionForeground
- * @cssprop --vscode-list-focusOutline
- * @cssprop --vscode-list-focusHighlightForeground
- * @cssprop --vscode-list-highlightForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-list-hoverForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-settings-textInputBackground
- * @cssprop --vscode-list-hoverBackground
+ * @cssprop [--vscode-badge-background=#616161]
+ * @cssprop [--vscode-badge-foreground=#f8f8f8]
+ * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]
+ * @cssprop [--vscode-settings-checkboxBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownForeground=#cccccc]
+ * @cssprop [--vscode-settings-dropdownListBorder=#454545]
+ * @cssprop [--vscode-focusBorder=#0078d4]
+ * @cssprop [--vscode-foreground=#cccccc]
+ * @cssprop [--vscode-font-family=sans-serif]
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]
+ * @cssprop [--vscode-inputValidation-errorBorder=#be1100]
+ * @cssprop [--vscode-list-activeSelectionBackground=#04395e]
+ * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]
+ * @cssprop [--vscode-list-focusOutline=#0078d4]
+ * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-highlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-hoverBackground=#2a2d2e]
+ * @cssprop [--vscode-list-hoverForeground=#ffffff]
  */
 export declare class VscodeMultiSelect extends VscodeSelectBase implements AssociatedFormControl {
     static styles: import("lit").CSSResult[];

package/dist/vscode-multi-select/vscode-multi-select.js

@@ -26,27 +26,27 @@ import { highlightRanges } from '../includes/vscode-select/helpers.js';
  * @attr name - Name which is used as a variable name in the data of the form-container.
  *
  * @cssprop [--dropdown-z-index=2]
- * @cssprop --vscode-badge-background
- * @cssprop --vscode-badge-foreground
- * @cssprop --vscode-settings-dropdownBorder
- * @cssprop --vscode-settings-checkboxBackground
- * @cssprop --vscode-settings-dropdownBackground
- * @cssprop --vscode-settings-dropdownListBorder
- * @cssprop --vscode-focusBorder
- * @cssprop --vscode-foreground
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-list-activeSelectionBackground
- * @cssprop --vscode-list-activeSelectionForeground
- * @cssprop --vscode-list-focusOutline
- * @cssprop --vscode-list-focusHighlightForeground
- * @cssprop --vscode-list-highlightForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-list-hoverForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-settings-textInputBackground
- * @cssprop --vscode-list-hoverBackground
+ * @cssprop [--vscode-badge-background=#616161]
+ * @cssprop [--vscode-badge-foreground=#f8f8f8]
+ * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]
+ * @cssprop [--vscode-settings-checkboxBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownForeground=#cccccc]
+ * @cssprop [--vscode-settings-dropdownListBorder=#454545]
+ * @cssprop [--vscode-focusBorder=#0078d4]
+ * @cssprop [--vscode-foreground=#cccccc]
+ * @cssprop [--vscode-font-family=sans-serif]
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]
+ * @cssprop [--vscode-inputValidation-errorBorder=#be1100]
+ * @cssprop [--vscode-list-activeSelectionBackground=#04395e]
+ * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]
+ * @cssprop [--vscode-list-focusOutline=#0078d4]
+ * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-highlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-hoverBackground=#2a2d2e]
+ * @cssprop [--vscode-list-hoverForeground=#ffffff]
  */
 let VscodeMultiSelect = class VscodeMultiSelect extends VscodeSelectBase {
     set selectedIndexes(val) {