@vscode-elements/elements 1.11.1-pre.2 → 1.11.1-pre.3

package/dist/includes/VscElement.js

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 export class VscElement extends LitElement {
     constructor() {
         super(...arguments);
-        this._version = '1.11.1-pre.2';
+        this._version = '1.11.1-pre.3';
     }
     /** VSCode Elements version */
     get version() {

package/dist/includes/VscElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"VscElement.js","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QACU,aAAQ,GAAG,cAAc,CAAC;IAMpC,CAAC;IAJC,8BAA8B;IAC9B,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;CACF","sourcesContent":["import {LitElement} from 'lit';\n\nexport class VscElement extends LitElement {\n  private _version = '1.11.1-pre.2';\n\n  /** VSCode Elements version */\n  get version(): string {\n    return this._version;\n  }\n}\n"]}
+{"version":3,"file":"VscElement.js","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QACU,aAAQ,GAAG,cAAc,CAAC;IAMpC,CAAC;IAJC,8BAA8B;IAC9B,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;CACF","sourcesContent":["import {LitElement} from 'lit';\n\nexport class VscElement extends LitElement {\n  private _version = '1.11.1-pre.3';\n\n  /** VSCode Elements version */\n  get version(): string {\n    return this._version;\n  }\n}\n"]}

package/dist/includes/form-button-widget/FormButtonWidgetBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormButtonWidgetBase.d.ts","sourceRoot":"","sources":["../../../src/includes/form-button-widget/FormButtonWidgetBase.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,qBAAa,oBAAqB,SAAQ,UAAU;IAElD,OAAO,UAAS;;IAOhB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAW5E,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,WAAW,CAEjB;CACH"}
+{"version":3,"file":"FormButtonWidgetBase.d.ts","sourceRoot":"","sources":["../../../src/includes/form-button-widget/FormButtonWidgetBase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,qBAAa,oBAAqB,SAAQ,UAAU;IAElD,OAAO,UAAS;;IAMhB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAW5E,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,WAAW,CAEjB;CACH"}

package/dist/includes/form-button-widget/FormButtonWidgetBase.js

@@ -5,7 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
-import { applyForegroundRGBA } from '../themeHelpers.js';
 import { VscElement } from '../VscElement.js';
 export class FormButtonWidgetBase extends VscElement {
     constructor() {
@@ -18,7 +17,6 @@ export class FormButtonWidgetBase extends VscElement {
         this._handleBlur = () => {
             this.focused = false;
         };
-        applyForegroundRGBA();
     }
     connectedCallback() {
         super.connectedCallback();

package/dist/includes/form-button-widget/FormButtonWidgetBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormButtonWidgetBase.js","sourceRoot":"","sources":["../../../src/includes/form-button-widget/FormButtonWidgetBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,mBAAmB,EAAC,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,oBAAqB,SAAQ,UAAU;IAIlD;QACE,KAAK,EAAE,CAAC;QAHV,YAAO,GAAG,KAAK,CAAC;QA8BR,kBAAa,GAAG,CAAC,CAAC;QAElB,iBAAY,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;QAlCA,mBAAmB,EAAE,CAAC;IACxB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACrD,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACrD,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,MAAc,EAAE,MAAc;QACnE,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAErD,IAAI,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YACzD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACrB,CAAC;aAAM,IAAI,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YACjE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;QACrC,CAAC;IACH,CAAC;CAWF;AAvCC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qDACzB","sourcesContent":["import {property} from 'lit/decorators.js';\nimport {applyForegroundRGBA} from '../themeHelpers.js';\nimport {VscElement} from '../VscElement.js';\n\nexport class FormButtonWidgetBase extends VscElement {\n  @property({type: Boolean, reflect: true})\n  focused = false;\n\n  constructor() {\n    super();\n    applyForegroundRGBA();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('focus', this._handleFocus);\n    this.addEventListener('blur', this._handleBlur);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('focus', this._handleFocus);\n    this.removeEventListener('blur', this._handleBlur);\n  }\n\n  attributeChangedCallback(name: string, oldVal: string, newVal: string): void {\n    super.attributeChangedCallback(name, oldVal, newVal);\n\n    if (name === 'disabled' && this.hasAttribute('disabled')) {\n      this._prevTabindex = this.tabIndex;\n      this.tabIndex = -1;\n    } else if (name === 'disabled' && !this.hasAttribute('disabled')) {\n      this.tabIndex = this._prevTabindex;\n    }\n  }\n\n  private _prevTabindex = 0;\n\n  private _handleFocus = (): void => {\n    this.focused = true;\n  };\n\n  private _handleBlur = (): void => {\n    this.focused = false;\n  };\n}\n"]}
+{"version":3,"file":"FormButtonWidgetBase.js","sourceRoot":"","sources":["../../../src/includes/form-button-widget/FormButtonWidgetBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAC;AAE5C,MAAM,OAAO,oBAAqB,SAAQ,UAAU;IAIlD;QACE,KAAK,EAAE,CAAC;QAHV,YAAO,GAAG,KAAK,CAAC;QA6BR,kBAAa,GAAG,CAAC,CAAC;QAElB,iBAAY,GAAG,GAAS,EAAE;YAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAS,EAAE;YAC/B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;IAjCF,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAClD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACrD,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACrD,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,MAAc,EAAE,MAAc;QACnE,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAErD,IAAI,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YACzD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QACrB,CAAC;aAAM,IAAI,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YACjE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC;QACrC,CAAC;IACH,CAAC;CAWF;AAtCC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qDACzB","sourcesContent":["import {property} from 'lit/decorators.js';\nimport {VscElement} from '../VscElement.js';\n\nexport class FormButtonWidgetBase extends VscElement {\n  @property({type: Boolean, reflect: true})\n  focused = false;\n\n  constructor() {\n    super();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('focus', this._handleFocus);\n    this.addEventListener('blur', this._handleBlur);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('focus', this._handleFocus);\n    this.removeEventListener('blur', this._handleBlur);\n  }\n\n  attributeChangedCallback(name: string, oldVal: string, newVal: string): void {\n    super.attributeChangedCallback(name, oldVal, newVal);\n\n    if (name === 'disabled' && this.hasAttribute('disabled')) {\n      this._prevTabindex = this.tabIndex;\n      this.tabIndex = -1;\n    } else if (name === 'disabled' && !this.hasAttribute('disabled')) {\n      this.tabIndex = this._prevTabindex;\n    }\n  }\n\n  private _prevTabindex = 0;\n\n  private _handleFocus = (): void => {\n    this.focused = true;\n  };\n\n  private _handleBlur = (): void => {\n    this.focused = false;\n  };\n}\n"]}

package/dist/includes/form-button-widget/base.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../../src/includes/form-button-widget/base.styles.ts"],"names":[],"mappings":";AAEA,wBA0FE"}
+{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../../src/includes/form-button-widget/base.styles.ts"],"names":[],"mappings":";AAEA,wBA2FE"}

package/dist/includes/form-button-widget/base.styles.js

@@ -78,6 +78,7 @@ export default [
 
     .label-inner {
       display: block;
+      opacity: 0.9;
       padding-left: 27px;
     }
 

package/dist/includes/form-button-widget/base.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../../src/includes/form-button-widget/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,eAAe;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport default [\n  css`\n    :host {\n      color: var(--vsc-foreground-translucent);\n      display: inline-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: 18px;\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    :host([disabled]) {\n      opacity: 0.4;\n    }\n\n    .wrapper {\n      cursor: pointer;\n      display: block;\n      font-size: var(--vscode-font-size);\n      margin-bottom: 4px;\n      margin-top: 4px;\n      min-height: 18px;\n      position: relative;\n      user-select: none;\n    }\n\n    :host([disabled]) .wrapper {\n      cursor: default;\n    }\n\n    input {\n      position: absolute;\n      height: 1px;\n      left: 9px;\n      margin: 0;\n      top: 17px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .icon {\n      align-items: center;\n      background-color: var(--vscode-settings-checkboxBackground);\n      background-size: 16px;\n      border: 1px solid var(--vscode-settings-checkboxBorder);\n      box-sizing: border-box;\n      color: var(--vscode-settings-checkboxForeground);\n      display: flex;\n      height: 18px;\n      justify-content: center;\n      left: 0;\n      margin-left: 0;\n      margin-right: 9px;\n      padding: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 18px;\n    }\n\n    .icon.before-empty-label {\n      margin-right: 0;\n    }\n\n    .label {\n      cursor: pointer;\n      display: block;\n      min-height: 18px;\n      min-width: 18px;\n    }\n\n    .label-inner {\n      display: block;\n      padding-left: 27px;\n    }\n\n    .label-inner.empty {\n      padding-left: 0;\n    }\n\n    :host([disabled]) .label {\n      cursor: default;\n    }\n  `,\n];\n"]}
+{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../../src/includes/form-button-widget/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,eAAe;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport default [\n  css`\n    :host {\n      color: var(--vsc-foreground-translucent);\n      display: inline-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: 18px;\n    }\n\n    :host(:focus) {\n      outline: none;\n    }\n\n    :host([disabled]) {\n      opacity: 0.4;\n    }\n\n    .wrapper {\n      cursor: pointer;\n      display: block;\n      font-size: var(--vscode-font-size);\n      margin-bottom: 4px;\n      margin-top: 4px;\n      min-height: 18px;\n      position: relative;\n      user-select: none;\n    }\n\n    :host([disabled]) .wrapper {\n      cursor: default;\n    }\n\n    input {\n      position: absolute;\n      height: 1px;\n      left: 9px;\n      margin: 0;\n      top: 17px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .icon {\n      align-items: center;\n      background-color: var(--vscode-settings-checkboxBackground);\n      background-size: 16px;\n      border: 1px solid var(--vscode-settings-checkboxBorder);\n      box-sizing: border-box;\n      color: var(--vscode-settings-checkboxForeground);\n      display: flex;\n      height: 18px;\n      justify-content: center;\n      left: 0;\n      margin-left: 0;\n      margin-right: 9px;\n      padding: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      width: 18px;\n    }\n\n    .icon.before-empty-label {\n      margin-right: 0;\n    }\n\n    .label {\n      cursor: pointer;\n      display: block;\n      min-height: 18px;\n      min-width: 18px;\n    }\n\n    .label-inner {\n      display: block;\n      opacity: 0.9;\n      padding-left: 27px;\n    }\n\n    .label-inner.empty {\n      padding-left: 0;\n    }\n\n    :host([disabled]) .label {\n      cursor: default;\n    }\n  `,\n];\n"]}

package/dist/includes/style-property-map.d.ts

@@ -0,0 +1,23 @@
+import { PropertyPart } from 'lit';
+import { Directive, PartInfo } from 'lit/directive.js';
+declare class StylePropertyMap extends Directive {
+    private _prevProperties;
+    constructor(partInfo: PartInfo);
+    update(part: PropertyPart, [styleProps]: [{
+        [key: string]: string;
+    }]): unknown;
+    render(_styleProps: Partial<CSSStyleDeclaration | {
+        [key: string]: string;
+    }>): symbol;
+}
+/**
+ * Implement a Lit directive similar to styleMap, but instead of setting styles via the style
+ * attribute (which violates CSP), it should apply styles using the style property.
+ *
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline)
+ */
+export declare const stylePropertyMap: (_styleProps: Partial<CSSStyleDeclaration | {
+    [key: string]: string;
+}>) => import("lit-html/directive").DirectiveResult<typeof StylePropertyMap>;
+export {};
+//# sourceMappingURL=style-property-map.d.ts.map

package/dist/includes/style-property-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-property-map.d.ts","sourceRoot":"","sources":["../../src/includes/style-property-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAC,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAa,QAAQ,EAAW,MAAM,kBAAkB,CAAC;AAE1E,cAAM,gBAAiB,SAAQ,SAAS;IACtC,OAAO,CAAC,eAAe,CAA+B;gBAE1C,QAAQ,EAAE,QAAQ;IAU9B,MAAM,CAAC,IAAI,EAAE,YAAY,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAC,GAAG,OAAO;IAiB5E,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,mBAAmB,GAAG;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAC;CAG3E;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;4EAA8B,CAAC"}

package/dist/includes/style-property-map.js

@@ -0,0 +1,37 @@
+import { noChange } from 'lit';
+import { Directive, directive, PartType } from 'lit/directive.js';
+class StylePropertyMap extends Directive {
+    constructor(partInfo) {
+        super(partInfo);
+        this._prevProperties = {};
+        if (partInfo.type !== PartType.PROPERTY || partInfo.name !== 'style') {
+            throw new Error('The `stylePropertyMap` directive must be used in the `style` property');
+        }
+    }
+    update(part, [styleProps]) {
+        Object.entries(styleProps).forEach(([key, val]) => {
+            if (this._prevProperties[key] !== val) {
+                if (key.startsWith('--')) {
+                    part.element.style.setProperty(key, val);
+                }
+                else {
+                    // @ts-expect-error I'm so sick of these stupid unresolvable TS errors.
+                    part.element.style[key] = val;
+                }
+                this._prevProperties[key] = val;
+            }
+        });
+        return noChange;
+    }
+    render(_styleProps) {
+        return noChange;
+    }
+}
+/**
+ * Implement a Lit directive similar to styleMap, but instead of setting styles via the style
+ * attribute (which violates CSP), it should apply styles using the style property.
+ *
+ * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline)
+ */
+export const stylePropertyMap = directive(StylePropertyMap);
+//# sourceMappingURL=style-property-map.js.map

package/dist/includes/style-property-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-property-map.js","sourceRoot":"","sources":["../../src/includes/style-property-map.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAe,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAC,SAAS,EAAE,SAAS,EAAY,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAE1E,MAAM,gBAAiB,SAAQ,SAAS;IAGtC,YAAY,QAAkB;QAC5B,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHV,oBAAe,GAA4B,EAAE,CAAC;QAKpD,IAAI,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACrE,MAAM,IAAI,KAAK,CACb,uEAAuE,CACxE,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,CAAC,IAAkB,EAAE,CAAC,UAAU,CAA4B;QAChE,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE;YAChD,IAAI,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,CAAC;gBACtC,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;gBAC3C,CAAC;qBAAM,CAAC;oBACN,uEAAuE;oBACvE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;gBAChC,CAAC;gBAED,IAAI,CAAC,eAAe,CAAC,GAAa,CAAC,GAAG,GAAG,CAAC;YAC5C,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,MAAM,CAAC,WAAmE;QACxE,OAAO,QAAQ,CAAC;IAClB,CAAC;CACF;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import {noChange, PropertyPart} from 'lit';\nimport {Directive, directive, PartInfo, PartType} from 'lit/directive.js';\n\nclass StylePropertyMap extends Directive {\n  private _prevProperties: {[key: string]: string} = {};\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n\n    if (partInfo.type !== PartType.PROPERTY || partInfo.name !== 'style') {\n      throw new Error(\n        'The `stylePropertyMap` directive must be used in the `style` property'\n      );\n    }\n  }\n\n  update(part: PropertyPart, [styleProps]: [{[key: string]: string}]): unknown {\n    Object.entries(styleProps).forEach(([key, val]) => {\n      if (this._prevProperties[key] !== val) {\n        if (key.startsWith('--')) {\n          part.element.style.setProperty(key, val);\n        } else {\n          // @ts-expect-error I'm so sick of these stupid unresolvable TS errors.\n          part.element.style[key] = val;\n        }\n\n        this._prevProperties[key as string] = val;\n      }\n    });\n\n    return noChange;\n  }\n\n  render(_styleProps: Partial<CSSStyleDeclaration | {[key: string]: string}>) {\n    return noChange;\n  }\n}\n\n/**\n * Implement a Lit directive similar to styleMap, but instead of setting styles via the style\n * attribute (which violates CSP), it should apply styles using the style property.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#unsafe-inline)\n */\nexport const stylePropertyMap = directive(StylePropertyMap);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAKxC,QAAA,MAAM,MAAM,EAAE,cA2Bb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"vscode-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAIxC,QAAA,MAAM,MAAM,EAAE,cA0Bb,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,7 +1,6 @@
 import { css } from 'lit';
 import defaultStyles from '../includes/default.styles.js';
 import baseStyles from '../includes/form-button-widget/base.styles.js';
-import formHelperTextStyles from '../includes/formHelperTextStyles.js';
 const styles = [
     defaultStyles,
     baseStyles,
@@ -28,7 +27,6 @@ const styles = [
       outline-offset: -1px;
     }
   `,
-    formHelperTextStyles,
 ];
 export default styles;
 //# sourceMappingURL=vscode-checkbox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-checkbox.styles.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,UAAU,MAAM,+CAA+C,CAAC;AACvE,OAAO,oBAAoB,MAAM,qCAAqC,CAAC;AAEvE,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBF;IACD,oBAAoB;CACrB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport baseStyles from '../includes/form-button-widget/base.styles.js';\nimport formHelperTextStyles from '../includes/formHelperTextStyles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  baseStyles,\n  css`\n    :host(:invalid) .icon,\n    :host([invalid]) .icon {\n      background-color: var(--vscode-inputValidation-errorBackground);\n      border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n    }\n\n    .icon {\n      border-radius: 3px;\n    }\n\n    .indeterminate-icon {\n      background-color: currentColor;\n      position: absolute;\n      height: 1px;\n      width: 12px;\n    }\n\n    :host(:focus):host(:not([disabled])) .icon {\n      outline: 1px solid var(--vscode-focusBorder);\n      outline-offset: -1px;\n    }\n  `,\n  formHelperTextStyles,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-checkbox.styles.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,UAAU,MAAM,+CAA+C,CAAC;AAEvE,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport baseStyles from '../includes/form-button-widget/base.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  baseStyles,\n  css`\n    :host(:invalid) .icon,\n    :host([invalid]) .icon {\n      background-color: var(--vscode-inputValidation-errorBackground);\n      border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n    }\n\n    .icon {\n      border-radius: 3px;\n    }\n\n    .indeterminate-icon {\n      background-color: currentColor;\n      position: absolute;\n      height: 1px;\n      width: 12px;\n    }\n\n    :host(:focus):host(:not([disabled])) .icon {\n      outline: 1px solid var(--vscode-focusBorder);\n      outline-offset: -1px;\n    }\n  `,\n];\n\nexport default styles;\n"]}

package/dist/vscode-checkbox-group/vscode-checkbox-group.styles.d.ts.map

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

package/dist/vscode-checkbox-group/vscode-checkbox-group.styles.js

@@ -1,6 +1,5 @@
 import { css } from 'lit';
 import defaultStyles from '../includes/default.styles.js';
-import formHelperTextStyles from '../includes/formHelperTextStyles.js';
 const styles = [
     defaultStyles,
     css `
@@ -34,7 +33,6 @@ const styles = [
       margin-bottom: 0;
     }
   `,
-    formHelperTextStyles,
 ];
 export default styles;
 //# sourceMappingURL=vscode-checkbox-group.styles.js.map

package/dist/vscode-checkbox-group/vscode-checkbox-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/vscode-checkbox-group/vscode-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,qCAAqC,CAAC;AAEvE,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BF;IACD,oBAAoB;CACrB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport formHelperTextStyles from '../includes/formHelperTextStyles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      display: block;\n    }\n\n    .wrapper {\n      display: flex;\n      flex-wrap: wrap;\n    }\n\n    :host([variant='vertical']) .wrapper {\n      display: block;\n    }\n\n    ::slotted(vscode-checkbox) {\n      margin-right: 20px;\n    }\n\n    ::slotted(vscode-checkbox:last-child) {\n      margin-right: 0;\n    }\n\n    :host([variant='vertical']) ::slotted(vscode-checkbox) {\n      display: block;\n      margin-bottom: 15px;\n    }\n\n    :host([variant='vertical']) ::slotted(vscode-checkbox:last-child) {\n      margin-bottom: 0;\n    }\n  `,\n  formHelperTextStyles,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/vscode-checkbox-group/vscode-checkbox-group.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BF;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    }\n\n    .wrapper {\n      display: flex;\n      flex-wrap: wrap;\n    }\n\n    :host([variant='vertical']) .wrapper {\n      display: block;\n    }\n\n    ::slotted(vscode-checkbox) {\n      margin-right: 20px;\n    }\n\n    ::slotted(vscode-checkbox:last-child) {\n      margin-right: 0;\n    }\n\n    :host([variant='vertical']) ::slotted(vscode-checkbox) {\n      display: block;\n      margin-bottom: 15px;\n    }\n\n    :host([variant='vertical']) ::slotted(vscode-checkbox:last-child) {\n      margin-bottom: 0;\n    }\n  `,\n];\n\nexport default styles;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-context-menu.d.ts","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAKrD,OAAO,sCAAsC,CAAC;AAG9C,UAAU,YAAY;IAEpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,+BAAU;IAEvB,IACI,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,EAY5B;IACD,IAAI,IAAI,IAAI,YAAY,EAAE,CAEzB;IAED;;OAEG;IAEH,YAAY,UAAS;IAErB,IACI,IAAI,CAAC,IAAI,EAAE,OAAO,EAiBrB;IACD,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,gBAAgB;IAEhB,QAAQ,SAAK;;IAkBb,OAAO,CAAC,2BAA2B,CAAM;IAGzC,OAAO,CAAC,KAAK,CAAS;IAGtB,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,qBAAqB,CAAgB;IAE7C,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,oBAAoB,CAAmC;IAE/D,OAAO,CAAC,UAAU;IA6BlB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,0BAA0B;IAoBlC,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,eAAe;IAIvB,MAAM,IAAI,cAAc;CAoCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;IAED,UAAU,2BAA2B;QACnC,yBAAyB,EAAE,yBAAyB,CAAC;KACtD;CACF"}
+{"version":3,"file":"vscode-context-menu.d.ts","sourceRoot":"","sources":["../../src/vscode-context-menu/vscode-context-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAKrD,OAAO,sCAAsC,CAAC;AAG9C,UAAU,YAAY;IAEpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAClD,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,+BAAU;IAEvB,IACI,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,EAY5B;IACD,IAAI,IAAI,IAAI,YAAY,EAAE,CAEzB;IAED;;OAEG;IAEH,YAAY,UAAS;IAErB,IACI,IAAI,CAAC,IAAI,EAAE,OAAO,EAiBrB;IACD,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,gBAAgB;IAEhB,QAAQ,SAAK;;IAkBb,OAAO,CAAC,2BAA2B,CAAM;IAGzC,OAAO,CAAC,KAAK,CAAS;IAGtB,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,qBAAqB,CAAgB;IAE7C,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,oBAAoB,CAAmC;IAE/D,OAAO,CAAC,UAAU;IA6BlB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,0BAA0B;IAoBlC,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,eAAe;IAIvB,MAAM,IAAI,cAAc;CAwCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;IAED,UAAU,2BAA2B;QACnC,yBAAyB,EAAE,yBAAyB,CAAC;KACtD;CACF"}

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

@@ -194,6 +194,7 @@ let VscodeContextMenu = class VscodeContextMenu extends VscElement {
         if (!this._show) {
             return html `${nothing}`;
         }
+        const selectedIndex = this._clickableItemIndexes[this._selectedClickableItemIndex];
         return html `
       <div class="context-menu" tabindex="0">
         ${this.data
@@ -203,6 +204,7 @@ let VscodeContextMenu = class VscodeContextMenu extends VscElement {
                   keybinding=${keybinding}
                   value=${value}
                   ?separator=${separator}
+                  ?selected=${index === selectedIndex}
                   tabindex=${tabindex}
                   @vsc-click=${this._onItemClick}
                   @mouseover=${this._onItemMouseOver}

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 {customElement, property, query, state} from 'lit/decorators.js';\nimport {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 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  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  render(): TemplateResult {\n    if (!this._show) {\n      return html`${nothing}`;\n    }\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                  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":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAKrD,OAAO,sCAAsC,CAAC;AAC9C,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAmBrD;;;;;;;;;;;;GAYG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAI/C,IAAI,IAAI,CAAC,IAAoB;QAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAElB,MAAM,OAAO,GAAa,EAAE,CAAC;QAE7B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACpB,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;gBACjB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YAClB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;IACvC,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IASD,IAAI,IAAI,CAAC,IAAa;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,2BAA2B,GAAG,CAAC,CAAC,CAAC;QAEtC,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC5B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;oBACpB,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;gBAC1B,CAAC;gBAED,qBAAqB,CAAC,GAAG,EAAE;oBACzB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE;wBAC5D,IAAI,EAAE,IAAI;qBACX,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IACD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAMD;QACE,KAAK,EAAE,CAAC;QAlCV;;WAEG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAyBrB,gBAAgB;QAEhB,aAAQ,GAAG,CAAC,CAAC;QAOb;;;;;;;;YAQI;QAGI,gCAA2B,GAAG,CAAC,CAAC,CAAC;QAGjC,UAAK,GAAG,KAAK,CAAC;QAKd,UAAK,GAAmB,EAAE,CAAC;QAE3B,0BAAqB,GAAa,EAAE,CAAC;QAQrC,yBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAhC7D,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IACpD,CAAC;IAyBO,eAAe,CAAC,EAAc;QACpC,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAIO,UAAU,CAAC,EAAiB;QAClC,MAAM,EAAC,GAAG,EAAC,GAAG,EAAE,CAAC;QAEjB,IACE,GAAG,KAAK,SAAS;YACjB,GAAG,KAAK,WAAW;YACnB,GAAG,KAAK,QAAQ;YAChB,GAAG,KAAK,OAAO,EACf,CAAC;YACD,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;QAED,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,SAAS;gBACZ,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,MAAM;YACR,KAAK,WAAW;gBACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxB,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,MAAM;YACR,QAAQ;QACV,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,2BAA2B,KAAK,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,2BAA2B,IAAI,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IACE,IAAI,CAAC,2BAA2B,GAAG,CAAC;YACpC,IAAI,CAAC,qBAAqB,CAAC,MAAM,EACjC,CAAC;YACD,IAAI,CAAC,2BAA2B,IAAI,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,2BAA2B,GAAG,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;IACnE,CAAC;IAEO,oBAAoB,CAAC,cAAqC;QAChE,MAAM,EAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAC,GAAG,cAAc,CAAC;QAEvE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,yBAAyB,EAAE;YACzC,MAAM,EAAE;gBACN,UAAU;gBACV,KAAK;gBACL,SAAS;gBACT,QAAQ;gBACR,KAAK;aACN;SACF,CAA8B,CAChC,CAAC;IACJ,CAAC;IAEO,0BAA0B,CAAC,cAAqC;QACtE,MAAM,EAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAC,GAAG,cAAc,CAAC;QACvE,MAAM,MAAM,GAAwB;YAClC,UAAU;YACV,KAAK;YACL,KAAK;YACL,SAAS;YACT,QAAQ;SACT,CAAC;QAEF,yDAAyD;QACzD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM;YACN,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,2BAA2B,KAAK,CAAC,CAAC,EAAE,CAAC;YAC5C,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GACjB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;QAC/D,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC9C,0BAA0B,CAC3B,CAAC;QACF,MAAM,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;QAE9C,IAAI,CAAC,0BAA0B,CAAC,cAAc,CAAC,CAAC;QAChD,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;QAE1C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,EAAE,GAAG,KAAK,CAAC,aAAsC,CAAC;QAExD,IAAI,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;QAE9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,KAAiB;QACxC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAqB,CAAC;QACvC,MAAM,KAAK,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAChD,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,CACzB,CAAC;QAEF,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;QAC3C,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,2BAA2B,GAAG,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA,GAAG,OAAO,EAAE,CAAC;QAC1B,CAAC;QAED,MAAM,aAAa,GACjB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;QAE/D,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CACX,CACE,EACE,KAAK,GAAG,EAAE,EACV,UAAU,GAAG,EAAE,EACf,KAAK,GAAG,EAAE,EACV,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,CAAC,GACb,EACD,KAAK,EACL,EAAE,CAAC,IAAI,CAAA;;0BAEG,KAAK;+BACA,UAAU;0BACf,KAAK;+BACA,SAAS;8BACV,KAAK,KAAK,aAAa;6BACxB,QAAQ;+BACN,IAAI,CAAC,YAAY;+BACjB,IAAI,CAAC,gBAAgB;8BACtB,IAAI,CAAC,eAAe;+BACnB,KAAK;;eAErB,CACF;YACH,CAAC,CAAC,IAAI,CAAA,eAAe;;KAE1B,CAAC;IACJ,CAAC;;AAzQM,wBAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAC,CAAC;6CAazC;AASD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAC,CAAC;uDAChD;AAGrB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAkBxC;AAOD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDAC3B;AAkBL;IADP,KAAK,EAAE;sEACiC;AAGjC;IADP,KAAK,EAAE;gDACc;AAGd;IADP,KAAK,CAAC,eAAe,CAAC;qDACa;AA5EzB,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA2Q7B","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {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 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  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  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

@@ -14,7 +14,7 @@ const styles = [
 
     .context-menu {
       background-color: var(--vscode-menu-background);
-      border-color: var(--vscode-menu-border);
+      border-color: var(--vscode-menu-border, var(--vscode-menu-background));
       border-radius: 5px;
       border-style: solid;
       border-width: 1px;

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);\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);\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"]}

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

@@ -37,7 +37,7 @@ const styles = [
       border-width: 1px;
       box-sizing: border-box;
       color: var(--vscode-menu-foreground);
-      cursor: default;
+      cursor: pointer;
       display: flex;
       flex: 1 1 auto;
       height: 2em;

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: default;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}

package/dist/vscode-form-helper/vscode-form-helper.d.ts

@@ -10,6 +10,7 @@ import { VscElement } from '../includes/VscElement.js';
 export declare class VscodeFormHelper extends VscElement {
     static styles: import("lit").CSSResultGroup;
     constructor();
+    private _injectLightDOMStyles;
     render(): TemplateResult;
 }
 declare global {

package/dist/vscode-form-helper/vscode-form-helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-form-helper.d.ts","sourceRoot":"","sources":["../../src/vscode-form-helper/vscode-form-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGrD;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,+BAAU;;IAOvB,MAAM,IAAI,cAAc;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"vscode-form-helper.d.ts","sourceRoot":"","sources":["../../src/vscode-form-helper/vscode-form-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAcrD;;;;;;GAMG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,+BAAU;;IAOvB,OAAO,CAAC,qBAAqB;IAQ7B,MAAM,IAAI,cAAc;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/vscode-form-helper/vscode-form-helper.js

@@ -6,9 +6,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { applyForegroundRGBA } from '../includes/themeHelpers.js';
 import { VscElement } from '../includes/VscElement.js';
 import styles from './vscode-form-helper.styles.js';
+const lightDOMStyles = new CSSStyleSheet();
+lightDOMStyles.replaceSync(`
+  vscode-form-helper * {
+    margin: 0;
+  }
+
+  vscode-form-helper *:not(:last-child) {
+    margin-bottom: 8px;
+  }
+`);
 /**
  * Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)
  *
@@ -19,7 +28,13 @@ import styles from './vscode-form-helper.styles.js';
 let VscodeFormHelper = class VscodeFormHelper extends VscElement {
     constructor() {
         super();
-        applyForegroundRGBA();
+        this._injectLightDOMStyles();
+    }
+    _injectLightDOMStyles() {
+        const found = document.adoptedStyleSheets.find((s) => s === lightDOMStyles);
+        if (!found) {
+            document.adoptedStyleSheets.push(lightDOMStyles);
+        }
     }
     render() {
         return html `<slot></slot>`;

package/dist/vscode-form-helper/vscode-form-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-form-helper.js","sourceRoot":"","sources":["../../src/vscode-form-helper/vscode-form-helper.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,mBAAmB,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD;;;;;;GAMG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAG9C;QACE,KAAK,EAAE,CAAC;QACR,mBAAmB,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATM,uBAAM,GAAG,MAAM,AAAT,CAAU;AADZ,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAW5B","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {applyForegroundRGBA} from '../includes/themeHelpers.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-form-helper.styles.js';\n\n/**\n * Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)\n *\n * @tag vscode-form-helper\n *\n * @cssprop --vsc-foreground-translucent - Default text color. 90% transparency version of `--vscode-foreground` by default.\n */\n@customElement('vscode-form-helper')\nexport class VscodeFormHelper extends VscElement {\n  static styles = styles;\n\n  constructor() {\n    super();\n    applyForegroundRGBA();\n  }\n\n  render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-form-helper': VscodeFormHelper;\n  }\n}\n"]}
+{"version":3,"file":"vscode-form-helper.js","sourceRoot":"","sources":["../../src/vscode-form-helper/vscode-form-helper.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,MAAM,cAAc,GAAG,IAAI,aAAa,EAAE,CAAC;AAC3C,cAAc,CAAC,WAAW,CAAC;;;;;;;;CAQ1B,CAAC,CAAC;AAEH;;;;;;GAMG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAG9C;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAEO,qBAAqB;QAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,cAAc,CAAC,CAAC;QAE5E,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAjBM,uBAAM,GAAG,MAAM,AAAT,CAAU;AADZ,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAmB5B","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-form-helper.styles.js';\n\nconst lightDOMStyles = new CSSStyleSheet();\nlightDOMStyles.replaceSync(`\n  vscode-form-helper * {\n    margin: 0;\n  }\n\n  vscode-form-helper *:not(:last-child) {\n    margin-bottom: 8px;\n  }\n`);\n\n/**\n * Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)\n *\n * @tag vscode-form-helper\n *\n * @cssprop --vsc-foreground-translucent - Default text color. 90% transparency version of `--vscode-foreground` by default.\n */\n@customElement('vscode-form-helper')\nexport class VscodeFormHelper extends VscElement {\n  static styles = styles;\n\n  constructor() {\n    super();\n    this._injectLightDOMStyles();\n  }\n\n  private _injectLightDOMStyles() {\n    const found = document.adoptedStyleSheets.find((s) => s === lightDOMStyles);\n\n    if (!found) {\n      document.adoptedStyleSheets.push(lightDOMStyles);\n    }\n  }\n\n  render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-form-helper': VscodeFormHelper;\n  }\n}\n"]}

package/dist/vscode-form-helper/vscode-form-helper.styles.d.ts.map

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

package/dist/vscode-form-helper/vscode-form-helper.styles.js

@@ -1,22 +1,21 @@
 import { css } from 'lit';
 import defaultStyles from '../includes/default.styles.js';
-import formHelperTextStyles from '../includes/formHelperTextStyles.js';
 const styles = [
     defaultStyles,
     css `
     :host {
-      color: var(--vsc-foreground-translucent);
       display: block;
+      line-height: 1.4em;
       margin-bottom: 4px;
       margin-top: 4px;
       max-width: 720px;
+      opacity: 0.9;
     }
 
     :host([vertical]) {
       margin-left: 0;
     }
-  `,
-    formHelperTextStyles,
+   `,
 ];
 export default styles;
 //# sourceMappingURL=vscode-form-helper.styles.js.map

package/dist/vscode-form-helper/vscode-form-helper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-form-helper.styles.js","sourceRoot":"","sources":["../../src/vscode-form-helper/vscode-form-helper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,oBAAoB,MAAM,qCAAqC,CAAC;AAEvE,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;GAYF;IACD,oBAAoB;CACrB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport formHelperTextStyles from '../includes/formHelperTextStyles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      color: var(--vsc-foreground-translucent);\n      display: block;\n      margin-bottom: 4px;\n      margin-top: 4px;\n      max-width: 720px;\n    }\n\n    :host([vertical]) {\n      margin-left: 0;\n    }\n  `,\n  formHelperTextStyles,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-form-helper.styles.js","sourceRoot":"","sources":["../../src/vscode-form-helper/vscode-form-helper.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;;;;;;;;;;;;;IAaD;CACH,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      line-height: 1.4em;\n      margin-bottom: 4px;\n      margin-top: 4px;\n      max-width: 720px;\n      opacity: 0.9;\n    }\n\n    :host([vertical]) {\n      margin-left: 0;\n    }\n   `,\n];\n\nexport default styles;\n"]}

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

@@ -1,4 +1,4 @@
-import { PropertyValues, TemplateResult } from 'lit';
+import { TemplateResult } from 'lit';
 import { VscElement } from '../includes/VscElement.js';
 /**
  * Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).
@@ -41,7 +41,6 @@ export declare class VscodeIcon extends VscElement {
     private static stylesheetHref;
     private static nonce;
     connectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
     /**
      * For using web fonts in web components, the font stylesheet must be included
      * twice: on the page and in the web component. This function looks for the

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-icon.d.ts","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGrD;;;;;;;;;;;GAWG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,+BAAU;IACvB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,UAAU,UAAS;IAEnB,OAAO,CAAC,MAAM,CAAC,cAAc,CAA0B;IAEvD,OAAO,CAAC,MAAM,CAAC,KAAK,CAA0B;IAE9C,iBAAiB,IAAI,IAAI;IASzB,SAAS,CAAC,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAU7D;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,cAAc,CAIpB;IAEF,MAAM,IAAI,cAAc;CAgCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"vscode-icon.d.ts","sourceRoot":"","sources":["../../src/vscode-icon/vscode-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AAIzC,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,+BAAU;IACvB;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,UAAS;IAEb;;OAEG;IAEH,YAAY,SAAO;IAEnB;;OAEG;IAEH,UAAU,UAAS;IAEnB,OAAO,CAAC,MAAM,CAAC,cAAc,CAA0B;IAEvD,OAAO,CAAC,MAAM,CAAC,KAAK,CAA0B;IAE9C,iBAAiB,IAAI,IAAI;IASzB;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,cAAc,CAIpB;IAEF,MAAM,IAAI,cAAc;CAsCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -10,6 +10,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { VscElement } from '../includes/VscElement.js';
+import { stylePropertyMap } from '../includes/style-property-map.js';
 import styles from './vscode-icon.styles.js';
 /**
  * Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).
@@ -60,14 +61,6 @@ let VscodeIcon = VscodeIcon_1 = class VscodeIcon extends VscElement {
         VscodeIcon_1.stylesheetHref = href;
         VscodeIcon_1.nonce = nonce;
     }
-    willUpdate(changedProperties) {
-        if (changedProperties.has('size')) {
-            this.style.setProperty('--size', `${this.size}px`);
-        }
-        if (changedProperties.has('spinDuration')) {
-            this.style.setProperty('--spin-duration', `${this.spinDuration}s`);
-        }
-    }
     /**
      * For using web fonts in web components, the font stylesheet must be included
      * twice: on the page and in the web component. This function looks for the
@@ -80,7 +73,8 @@ let VscodeIcon = VscodeIcon_1 = class VscodeIcon extends VscElement {
         const nonce = linkElement?.nonce || undefined;
         if (!linkElement) {
             let msg = '[VSCode Elements] To use the Icon component, the codicons.css file must be included in the page with the id `vscode-codicon-stylesheet`! ';
-            msg += 'See https://vscode-elements.github.io/components/icon/ for more details.';
+            msg +=
+                'See https://vscode-elements.github.io/components/icon/ for more details.';
             console.warn(msg);
         }
         return { nonce, href };
@@ -93,6 +87,12 @@ let VscodeIcon = VscodeIcon_1 = class VscodeIcon extends VscElement {
             ['codicon-' + this.name]: true,
             spin: this.spin,
         })}
+      .style=${stylePropertyMap({
+            animationDuration: String(this.spinDuration) + 's',
+            fontSize: this.size + 'px',
+            height: this.size + 'px',
+            width: this.size + 'px',
+        })}
     ></span>`;
         const wrapped = this.actionIcon
             ? html ` <button

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, PropertyValues, TemplateResult} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {VscElement} from '../includes/VscElement.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 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  connectedCallback(): void {\n    super.connectedCallback();\n\n    const {href, nonce} = this._getStylesheetConfig();\n\n    VscodeIcon.stylesheetHref = href;\n    VscodeIcon.nonce = nonce;\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    if (changedProperties.has('size')) {\n      this.style.setProperty('--size', `${this.size}px`);\n    }\n\n    if (changedProperties.has('spinDuration')) {\n      this.style.setProperty('--spin-duration', `${this.spinDuration}s`);\n    }\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 = '[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 += '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  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    ></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 {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {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 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  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  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,cA6Db,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,cAyDb,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -9,11 +9,7 @@ const styles = [
     }
 
     .codicon[class*='codicon-'] {
-      animation-duration: var(--spin-duration) !important;
       display: block;
-      font-size: var(--size);
-      height: var(--size);
-      width: var(--size);
     }
 
     .icon,