@vscode-elements/elements 1.11.0 → 1.11.1-pre.1

package/dist/includes/VscElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VscElement.d.ts","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,qBAAa,UAAW,SAAQ,UAAU;IACxC,OAAO,CAAC,QAAQ,CAAY;IAE5B,8BAA8B;IAC9B,IAAI,OAAO,IAAI,MAAM,CAEpB;CACF"}
+{"version":3,"file":"VscElement.d.ts","sourceRoot":"","sources":["../../src/includes/VscElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAE/B,qBAAa,UAAW,SAAQ,UAAU;IACxC,OAAO,CAAC,QAAQ,CAAkB;IAElC,8BAA8B;IAC9B,IAAI,OAAO,IAAI,MAAM,CAEpB;CACF"}

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.0';
+        this._version = '1.11.1-pre.1';
     }
     /** 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,QAAQ,CAAC;IAM9B,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.0';\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.1';\n\n  /** VSCode Elements version */\n  get version(): string {\n    return this._version;\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { VscElement } from '../includes/VscElement.js';
 /**
  * Display a [Codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html).
@@ -41,6 +41,7 @@ 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,EAAC,MAAM,KAAK,CAAC;AAKzC,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;;;;;OAKG;IACH,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,cAAc,CAIpB;IAEF,MAAM,IAAI,cAAc;CAsCzB;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,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"}

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

@@ -8,7 +8,6 @@ var VscodeIcon_1;
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { VscElement } from '../includes/VscElement.js';
 import styles from './vscode-icon.styles.js';
@@ -61,6 +60,14 @@ 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
@@ -70,7 +77,12 @@ let VscodeIcon = VscodeIcon_1 = class VscodeIcon extends VscElement {
     _getStylesheetConfig() {
         const linkElement = document.getElementById('vscode-codicon-stylesheet');
         const href = linkElement?.getAttribute('href') || undefined;
-        const nonce = linkElement?.getAttribute('nonce') || undefined;
+        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.';
+            console.warn(msg);
+        }
         return { nonce, href };
     }
     render() {
@@ -81,12 +93,6 @@ let VscodeIcon = VscodeIcon_1 = class VscodeIcon extends VscElement {
             ['codicon-' + this.name]: true,
             spin: this.spin,
         })}
-      style=${styleMap({
-            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, TemplateResult} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-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  /**\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?.getAttribute('nonce') || undefined;\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=${styleMap({\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, 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"]}

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,cA6Db,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

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

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DF;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      animation-duration: var(--spin-duration) !important;\n      display: block;\n      font-size: var(--size);\n      height: var(--size);\n      width: var(--size);\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"]}

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

@@ -1,4 +1,4 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { VscElement } from '../includes/VscElement.js';
 /**
  * @tag vscode-scrollable
@@ -17,11 +17,10 @@ export declare class VscodeScrollable extends VscElement {
     get scrollPos(): number;
     get scrollMax(): number;
     private _isDragging;
-    private _thumbHeight;
-    private _thumbY;
     private _thumbVisible;
     private _thumbFade;
     private _thumbActive;
+    private _scrollbarTrackZ;
     private _contentElement;
     private _scrollThumbElement;
     private _scrollableContainer;
@@ -31,9 +30,9 @@ export declare class VscodeScrollable extends VscElement {
     private _scrollThumbStartY;
     private _mouseStartY;
     private _scrollbarVisible;
-    private _scrollbarTrackZ;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     private _resizeObserverCallback;
     private _updateScrollbar;
     private _zIndexFix;

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-scrollable.d.ts","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAUlD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGrD;;;;;;;;GAQG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,+BAAU;IAGvB,MAAM,UAAQ;IAGd,QAAQ,UAAS;IAEjB,IACI,SAAS,CAAC,GAAG,EAAE,MAAM,EAExB;IACD,IAAI,SAAS,IAAI,MAAM,CAMtB;IAED,IACI,SAAS,IAAI,MAAM,CAMtB;IAGD,OAAO,CAAC,WAAW,CAAS;IAG5B,OAAO,CAAC,YAAY,CAAK;IAGzB,OAAO,CAAC,OAAO,CAAK;IAGpB,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,eAAe,CAAkB;IAGzC,OAAO,CAAC,mBAAmB,CAAkB;IAG7C,OAAO,CAAC,oBAAoB,CAAkB;IAG9C,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,mBAAmB,CAAkB;IAC7C,OAAO,CAAC,sBAAsB,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,iBAAiB,CAAQ;IACjC,OAAO,CAAC,gBAAgB,CAAK;IAE7B,iBAAiB,IAAI,IAAI;IAuBzB,oBAAoB,IAAI,IAAI;IAY5B,OAAO,CAAC,uBAAuB,CAE7B;IAEF,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,uBAAuB;IAa/B,OAAO,CAAC,uBAAuB;IAqB/B,OAAO,CAAC,4BAA4B,CACM;IAE1C,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,0BAA0B,CAAyC;IAE3E,OAAO,CAAC,4BAA4B;IAcpC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,0BAA0B,CAAyC;IAE3E,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,yBAAyB,CAAwC;IAEzE,MAAM,IAAI,cAAc;CAyCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}
+{"version":3,"file":"vscode-scrollable.d.ts","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AASlE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGrD;;;;;;;;GAQG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,+BAAU;IAGvB,MAAM,UAAQ;IAGd,QAAQ,UAAS;IAEjB,IACI,SAAS,CAAC,GAAG,EAAE,MAAM,EAExB;IACD,IAAI,SAAS,IAAI,MAAM,CAMtB;IAED,IACI,SAAS,IAAI,MAAM,CAMtB;IAGD,OAAO,CAAC,WAAW,CAAS;IAG5B,OAAO,CAAC,aAAa,CAAS;IAG9B,OAAO,CAAC,UAAU,CAAS;IAG3B,OAAO,CAAC,YAAY,CAAS;IAG7B,OAAO,CAAC,gBAAgB,CAAK;IAG7B,OAAO,CAAC,eAAe,CAAkB;IAGzC,OAAO,CAAC,mBAAmB,CAAkB;IAG7C,OAAO,CAAC,oBAAoB,CAAkB;IAG9C,OAAO,CAAC,iBAAiB,CAAY;IAErC,OAAO,CAAC,mBAAmB,CAAkB;IAC7C,OAAO,CAAC,sBAAsB,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAK;IAC/B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,iBAAiB,CAAQ;IAEjC,iBAAiB,IAAI,IAAI;IAuBzB,oBAAoB,IAAI,IAAI;IAY5B,SAAS,CAAC,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAS7D,OAAO,CAAC,uBAAuB,CAE7B;IAEF,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,uBAAuB;IAa/B,OAAO,CAAC,uBAAuB;IAqB/B,OAAO,CAAC,4BAA4B,CACM;IAE1C,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,0BAA0B,CAAyC;IAE3E,OAAO,CAAC,4BAA4B;IAcpC,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,0BAA0B,CAAyC;IAE3E,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,yBAAyB,CAAwC;IAEzE,MAAM,IAAI,cAAc;CAkCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}

package/dist/vscode-scrollable/vscode-scrollable.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from 'lit';
 import { customElement, property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { VscElement } from '../includes/VscElement.js';
 import styles from './vscode-scrollable.styles.js';
 /**
@@ -25,18 +24,19 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         this.shadow = true;
         this.scrolled = false;
         this._isDragging = false;
-        this._thumbHeight = 0;
-        this._thumbY = 0;
         this._thumbVisible = false;
         this._thumbFade = false;
         this._thumbActive = false;
+        this._scrollbarTrackZ = 0;
         this._scrollThumbStartY = 0;
         this._mouseStartY = 0;
         this._scrollbarVisible = true;
-        this._scrollbarTrackZ = 0;
         this._resizeObserverCallback = () => {
             this._updateScrollbar();
         };
+        this._onSlotChange = () => {
+            this._zIndexFix();
+        };
         this._onScrollThumbMouseMoveBound = this._onScrollThumbMouseMove.bind(this);
         this._onScrollThumbMouseUpBound = this._onScrollThumbMouseUp.bind(this);
         this._onComponentMouseOverBound = this._onComponentMouseOver.bind(this);
@@ -79,6 +79,11 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         this.removeEventListener('mouseover', this._onComponentMouseOverBound);
         this.removeEventListener('mouseout', this._onComponentMouseOutBound);
     }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('_scrollbarTrackZ')) {
+            this.style.setProperty('--scrollbar-track-z', this._scrollbarTrackZ.toString());
+        }
+    }
     _updateScrollbar() {
         const compCr = this.getBoundingClientRect();
         const contentCr = this._contentElement.getBoundingClientRect();
@@ -87,7 +92,7 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         }
         else {
             this._scrollbarVisible = true;
-            this._thumbHeight = compCr.height * (compCr.height / contentCr.height);
+            this._scrollThumbElement.style.height = `${compCr.height * (compCr.height / contentCr.height)}px`;
         }
         this.requestUpdate();
     }
@@ -106,10 +111,6 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
             }
         });
         this._scrollbarTrackZ = highestZ + 1;
-        this.requestUpdate();
-    }
-    _onSlotChange() {
-        this._zIndexFix();
     }
     _onScrollThumbMouseDown(event) {
         const cmpCr = this.getBoundingClientRect();
@@ -136,7 +137,7 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         else {
             nextPos = predictedPos;
         }
-        this._thumbY = nextPos;
+        this._scrollThumbElement.style.top = `${nextPos}px`;
         this._scrollableContainer.scrollTop =
             (nextPos / (cmpH - thumbH)) * (contentH - cmpH);
     }
@@ -161,7 +162,7 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
         const contentH = this._contentElement.getBoundingClientRect().height;
         const overflown = contentH - cmpH;
         const ratio = scrollTop / overflown;
-        this._thumbY = ratio * (cmpH - thumbH);
+        this._scrollThumbElement.style.top = `${ratio * (cmpH - thumbH)}px`;
     }
     _onComponentMouseOver() {
         this._thumbVisible = true;
@@ -176,9 +177,9 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
     render() {
         return html `
       <div
-        class="scrollable-container"
-        style=${styleMap({
-            'user-select': this._isDragging ? 'none' : 'auto',
+        class=${classMap({
+            'scrollable-container': true,
+            dragging: this._isDragging,
         })}
       >
         <div class=${classMap({ shadow: true, visible: this.scrolled })}></div>
@@ -189,9 +190,6 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
           class=${classMap({
             'scrollbar-track': true,
             hidden: !this._scrollbarVisible,
-        })}
-          style=${styleMap({
-            'z-index': String(this._scrollbarTrackZ),
         })}
         >
           <div
@@ -200,10 +198,6 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
             visible: this._thumbVisible,
             fade: this._thumbFade,
             active: this._thumbActive,
-        })}
-            style=${styleMap({
-            height: `${this._thumbHeight}px`,
-            top: `${this._thumbY}px`,
         })}
             @mousedown=${this._onScrollThumbMouseDown}
           ></div>
@@ -231,12 +225,6 @@ __decorate([
 __decorate([
     state()
 ], VscodeScrollable.prototype, "_isDragging", void 0);
-__decorate([
-    state()
-], VscodeScrollable.prototype, "_thumbHeight", void 0);
-__decorate([
-    state()
-], VscodeScrollable.prototype, "_thumbY", void 0);
 __decorate([
     state()
 ], VscodeScrollable.prototype, "_thumbVisible", void 0);
@@ -246,11 +234,14 @@ __decorate([
 __decorate([
     state()
 ], VscodeScrollable.prototype, "_thumbActive", void 0);
+__decorate([
+    state()
+], VscodeScrollable.prototype, "_scrollbarTrackZ", void 0);
 __decorate([
     query('.content')
 ], VscodeScrollable.prototype, "_contentElement", void 0);
 __decorate([
-    query('.scrollbar-thumb')
+    query('.scrollbar-thumb', true)
 ], VscodeScrollable.prototype, "_scrollThumbElement", void 0);
 __decorate([
     query('.scrollable-container')

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-scrollable.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-scrollable.styles.js';\n\n/**\n * @tag vscode-scrollable\n *\n * @cssprop [--min-thumb-height=20px] - Scrollbar thumb minimum height\n * @cssprop --vscode-scrollbar-shadow\n * @cssprop --vscode-scrollbarSlider-background\n * @cssprop --vscode-scrollbarSlider-hoverBackground\n * @cssprop --vscode-scrollbarSlider-activeBackground\n */\n@customElement('vscode-scrollable')\nexport class VscodeScrollable extends VscElement {\n  static styles = styles;\n\n  @property({type: Boolean, reflect: true})\n  shadow = true;\n\n  @property({type: Boolean, reflect: true})\n  scrolled = false;\n\n  @property({type: Number, attribute: 'scroll-pos'})\n  set scrollPos(val: number) {\n    this._scrollableContainer.scrollTop = val;\n  }\n  get scrollPos(): number {\n    if (!this._scrollableContainer) {\n      return 0;\n    }\n\n    return this._scrollableContainer.scrollTop;\n  }\n\n  @property({type: Number, attribute: 'scroll-max'})\n  get scrollMax(): number {\n    if (!this._scrollableContainer) {\n      return 0;\n    }\n\n    return this._scrollableContainer.scrollHeight;\n  }\n\n  @state()\n  private _isDragging = false;\n\n  @state()\n  private _thumbHeight = 0;\n\n  @state()\n  private _thumbY = 0;\n\n  @state()\n  private _thumbVisible = false;\n\n  @state()\n  private _thumbFade = false;\n\n  @state()\n  private _thumbActive = false;\n\n  @query('.content')\n  private _contentElement!: HTMLDivElement;\n\n  @query('.scrollbar-thumb')\n  private _scrollThumbElement!: HTMLDivElement;\n\n  @query('.scrollable-container')\n  private _scrollableContainer!: HTMLDivElement;\n\n  @queryAssignedElements()\n  private _assignedElements!: NodeList;\n\n  private _hostResizeObserver!: ResizeObserver;\n  private _contentResizeObserver!: ResizeObserver;\n  private _scrollThumbStartY = 0;\n  private _mouseStartY = 0;\n  private _scrollbarVisible = true;\n  private _scrollbarTrackZ = 0;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this._hostResizeObserver = new ResizeObserver(this._resizeObserverCallback);\n    this._contentResizeObserver = new ResizeObserver(\n      this._resizeObserverCallback\n    );\n\n    this.requestUpdate();\n\n    this.updateComplete.then(() => {\n      this._scrollableContainer.addEventListener(\n        'scroll',\n        this._onScrollableContainerScroll.bind(this)\n      );\n      this._hostResizeObserver.observe(this);\n      this._contentResizeObserver.observe(this._contentElement);\n    });\n\n    this.addEventListener('mouseover', this._onComponentMouseOverBound);\n    this.addEventListener('mouseout', this._onComponentMouseOutBound);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this._hostResizeObserver.unobserve(this);\n    this._hostResizeObserver.disconnect();\n    this._contentResizeObserver.unobserve(this._contentElement);\n    this._contentResizeObserver.disconnect();\n\n    this.removeEventListener('mouseover', this._onComponentMouseOverBound);\n    this.removeEventListener('mouseout', this._onComponentMouseOutBound);\n  }\n\n  private _resizeObserverCallback = () => {\n    this._updateScrollbar();\n  };\n\n  private _updateScrollbar() {\n    const compCr = this.getBoundingClientRect();\n    const contentCr = this._contentElement.getBoundingClientRect();\n\n    if (compCr.height >= contentCr.height) {\n      this._scrollbarVisible = false;\n    } else {\n      this._scrollbarVisible = true;\n      this._thumbHeight = compCr.height * (compCr.height / contentCr.height);\n    }\n\n    this.requestUpdate();\n  }\n\n  private _zIndexFix() {\n    let highestZ = 0;\n\n    this._assignedElements.forEach((n) => {\n      if ('style' in n) {\n        const computedZIndex = window.getComputedStyle(n as HTMLElement).zIndex;\n        const isNumber = /([0-9-])+/g.test(computedZIndex);\n\n        if (isNumber) {\n          highestZ =\n            Number(computedZIndex) > highestZ\n              ? Number(computedZIndex)\n              : highestZ;\n        }\n      }\n    });\n\n    this._scrollbarTrackZ = highestZ + 1;\n    this.requestUpdate();\n  }\n\n  private _onSlotChange() {\n    this._zIndexFix();\n  }\n\n  private _onScrollThumbMouseDown(event: MouseEvent) {\n    const cmpCr = this.getBoundingClientRect();\n    const thCr = this._scrollThumbElement.getBoundingClientRect();\n\n    this._mouseStartY = event.screenY;\n    this._scrollThumbStartY = thCr.top - cmpCr.top;\n    this._isDragging = true;\n    this._thumbActive = true;\n\n    document.addEventListener('mousemove', this._onScrollThumbMouseMoveBound);\n    document.addEventListener('mouseup', this._onScrollThumbMouseUpBound);\n  }\n\n  private _onScrollThumbMouseMove(event: MouseEvent) {\n    const predictedPos =\n      this._scrollThumbStartY + (event.screenY - this._mouseStartY);\n    let nextPos = 0;\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n    const contentH = this._contentElement.getBoundingClientRect().height;\n\n    if (predictedPos < 0) {\n      nextPos = 0;\n    } else if (predictedPos > cmpH - thumbH) {\n      nextPos = cmpH - thumbH;\n    } else {\n      nextPos = predictedPos;\n    }\n\n    this._thumbY = nextPos;\n    this._scrollableContainer.scrollTop =\n      (nextPos / (cmpH - thumbH)) * (contentH - cmpH);\n  }\n\n  private _onScrollThumbMouseMoveBound =\n    this._onScrollThumbMouseMove.bind(this);\n\n  private _onScrollThumbMouseUp(event: MouseEvent) {\n    this._isDragging = false;\n    this._thumbActive = false;\n\n    const cr = this.getBoundingClientRect();\n    const {x, y, width, height} = cr;\n    const {pageX, pageY} = event;\n\n    if (pageX > x + width || pageX < x || pageY > y + height || pageY < y) {\n      this._thumbFade = true;\n      this._thumbVisible = false;\n    }\n\n    document.removeEventListener(\n      'mousemove',\n      this._onScrollThumbMouseMoveBound\n    );\n    document.removeEventListener('mouseup', this._onScrollThumbMouseUpBound);\n  }\n\n  private _onScrollThumbMouseUpBound = this._onScrollThumbMouseUp.bind(this);\n\n  private _onScrollableContainerScroll() {\n    const scrollTop = this._scrollableContainer.scrollTop;\n    this.scrolled = scrollTop > 0;\n\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n    const contentH = this._contentElement.getBoundingClientRect().height;\n\n    const overflown = contentH - cmpH;\n    const ratio = scrollTop / overflown;\n\n    this._thumbY = ratio * (cmpH - thumbH);\n  }\n\n  private _onComponentMouseOver() {\n    this._thumbVisible = true;\n    this._thumbFade = false;\n  }\n\n  private _onComponentMouseOverBound = this._onComponentMouseOver.bind(this);\n\n  private _onComponentMouseOut() {\n    if (!this._thumbActive) {\n      this._thumbVisible = false;\n      this._thumbFade = true;\n    }\n  }\n\n  private _onComponentMouseOutBound = this._onComponentMouseOut.bind(this);\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=\"scrollable-container\"\n        style=${styleMap({\n          'user-select': this._isDragging ? 'none' : 'auto',\n        })}\n      >\n        <div class=${classMap({shadow: true, visible: this.scrolled})}></div>\n        ${this._isDragging\n          ? html`<div class=\"prevent-interaction\"></div>`\n          : nothing}\n        <div\n          class=${classMap({\n            'scrollbar-track': true,\n            hidden: !this._scrollbarVisible,\n          })}\n          style=${styleMap({\n            'z-index': String(this._scrollbarTrackZ),\n          })}\n        >\n          <div\n            class=${classMap({\n              'scrollbar-thumb': true,\n              visible: this._thumbVisible,\n              fade: this._thumbFade,\n              active: this._thumbActive,\n            })}\n            style=${styleMap({\n              height: `${this._thumbHeight}px`,\n              top: `${this._thumbY}px`,\n            })}\n            @mousedown=${this._onScrollThumbMouseDown}\n          ></div>\n        </div>\n        <div class=\"content\">\n          <slot @slotchange=${this._onSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-scrollable': VscodeScrollable;\n  }\n}\n"]}
+{"version":3,"file":"vscode-scrollable.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-scrollable.styles.js';\n\n/**\n * @tag vscode-scrollable\n *\n * @cssprop [--min-thumb-height=20px] - Scrollbar thumb minimum height\n * @cssprop --vscode-scrollbar-shadow\n * @cssprop --vscode-scrollbarSlider-background\n * @cssprop --vscode-scrollbarSlider-hoverBackground\n * @cssprop --vscode-scrollbarSlider-activeBackground\n */\n@customElement('vscode-scrollable')\nexport class VscodeScrollable extends VscElement {\n  static styles = styles;\n\n  @property({type: Boolean, reflect: true})\n  shadow = true;\n\n  @property({type: Boolean, reflect: true})\n  scrolled = false;\n\n  @property({type: Number, attribute: 'scroll-pos'})\n  set scrollPos(val: number) {\n    this._scrollableContainer.scrollTop = val;\n  }\n  get scrollPos(): number {\n    if (!this._scrollableContainer) {\n      return 0;\n    }\n\n    return this._scrollableContainer.scrollTop;\n  }\n\n  @property({type: Number, attribute: 'scroll-max'})\n  get scrollMax(): number {\n    if (!this._scrollableContainer) {\n      return 0;\n    }\n\n    return this._scrollableContainer.scrollHeight;\n  }\n\n  @state()\n  private _isDragging = false;\n\n  @state()\n  private _thumbVisible = false;\n\n  @state()\n  private _thumbFade = false;\n\n  @state()\n  private _thumbActive = false;\n\n  @state()\n  private _scrollbarTrackZ = 0;\n\n  @query('.content')\n  private _contentElement!: HTMLDivElement;\n\n  @query('.scrollbar-thumb', true)\n  private _scrollThumbElement!: HTMLDivElement;\n\n  @query('.scrollable-container')\n  private _scrollableContainer!: HTMLDivElement;\n\n  @queryAssignedElements()\n  private _assignedElements!: NodeList;\n\n  private _hostResizeObserver!: ResizeObserver;\n  private _contentResizeObserver!: ResizeObserver;\n  private _scrollThumbStartY = 0;\n  private _mouseStartY = 0;\n  private _scrollbarVisible = true;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this._hostResizeObserver = new ResizeObserver(this._resizeObserverCallback);\n    this._contentResizeObserver = new ResizeObserver(\n      this._resizeObserverCallback\n    );\n\n    this.requestUpdate();\n\n    this.updateComplete.then(() => {\n      this._scrollableContainer.addEventListener(\n        'scroll',\n        this._onScrollableContainerScroll.bind(this)\n      );\n      this._hostResizeObserver.observe(this);\n      this._contentResizeObserver.observe(this._contentElement);\n    });\n\n    this.addEventListener('mouseover', this._onComponentMouseOverBound);\n    this.addEventListener('mouseout', this._onComponentMouseOutBound);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this._hostResizeObserver.unobserve(this);\n    this._hostResizeObserver.disconnect();\n    this._contentResizeObserver.unobserve(this._contentElement);\n    this._contentResizeObserver.disconnect();\n\n    this.removeEventListener('mouseover', this._onComponentMouseOverBound);\n    this.removeEventListener('mouseout', this._onComponentMouseOutBound);\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    if (changedProperties.has('_scrollbarTrackZ')) {\n      this.style.setProperty(\n        '--scrollbar-track-z',\n        this._scrollbarTrackZ.toString()\n      );\n    }\n  }\n\n  private _resizeObserverCallback = () => {\n    this._updateScrollbar();\n  };\n\n  private _updateScrollbar() {\n    const compCr = this.getBoundingClientRect();\n    const contentCr = this._contentElement.getBoundingClientRect();\n\n    if (compCr.height >= contentCr.height) {\n      this._scrollbarVisible = false;\n    } else {\n      this._scrollbarVisible = true;\n      this._scrollThumbElement.style.height = `${compCr.height * (compCr.height / contentCr.height)}px`;\n    }\n\n    this.requestUpdate();\n  }\n\n  private _zIndexFix() {\n    let highestZ = 0;\n\n    this._assignedElements.forEach((n) => {\n      if ('style' in n) {\n        const computedZIndex = window.getComputedStyle(n as HTMLElement).zIndex;\n        const isNumber = /([0-9-])+/g.test(computedZIndex);\n\n        if (isNumber) {\n          highestZ =\n            Number(computedZIndex) > highestZ\n              ? Number(computedZIndex)\n              : highestZ;\n        }\n      }\n    });\n\n    this._scrollbarTrackZ = highestZ + 1;\n  }\n\n  private _onSlotChange = () => {\n    this._zIndexFix();\n  };\n\n  private _onScrollThumbMouseDown(event: MouseEvent) {\n    const cmpCr = this.getBoundingClientRect();\n    const thCr = this._scrollThumbElement.getBoundingClientRect();\n\n    this._mouseStartY = event.screenY;\n    this._scrollThumbStartY = thCr.top - cmpCr.top;\n    this._isDragging = true;\n    this._thumbActive = true;\n\n    document.addEventListener('mousemove', this._onScrollThumbMouseMoveBound);\n    document.addEventListener('mouseup', this._onScrollThumbMouseUpBound);\n  }\n\n  private _onScrollThumbMouseMove(event: MouseEvent) {\n    const predictedPos =\n      this._scrollThumbStartY + (event.screenY - this._mouseStartY);\n    let nextPos = 0;\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n    const contentH = this._contentElement.getBoundingClientRect().height;\n\n    if (predictedPos < 0) {\n      nextPos = 0;\n    } else if (predictedPos > cmpH - thumbH) {\n      nextPos = cmpH - thumbH;\n    } else {\n      nextPos = predictedPos;\n    }\n\n    this._scrollThumbElement.style.top = `${nextPos}px`;\n    this._scrollableContainer.scrollTop =\n      (nextPos / (cmpH - thumbH)) * (contentH - cmpH);\n  }\n\n  private _onScrollThumbMouseMoveBound =\n    this._onScrollThumbMouseMove.bind(this);\n\n  private _onScrollThumbMouseUp(event: MouseEvent) {\n    this._isDragging = false;\n    this._thumbActive = false;\n\n    const cr = this.getBoundingClientRect();\n    const {x, y, width, height} = cr;\n    const {pageX, pageY} = event;\n\n    if (pageX > x + width || pageX < x || pageY > y + height || pageY < y) {\n      this._thumbFade = true;\n      this._thumbVisible = false;\n    }\n\n    document.removeEventListener(\n      'mousemove',\n      this._onScrollThumbMouseMoveBound\n    );\n    document.removeEventListener('mouseup', this._onScrollThumbMouseUpBound);\n  }\n\n  private _onScrollThumbMouseUpBound = this._onScrollThumbMouseUp.bind(this);\n\n  private _onScrollableContainerScroll() {\n    const scrollTop = this._scrollableContainer.scrollTop;\n    this.scrolled = scrollTop > 0;\n\n    const cmpH = this.getBoundingClientRect().height;\n    const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n    const contentH = this._contentElement.getBoundingClientRect().height;\n\n    const overflown = contentH - cmpH;\n    const ratio = scrollTop / overflown;\n\n    this._scrollThumbElement.style.top = `${ratio * (cmpH - thumbH)}px`;\n  }\n\n  private _onComponentMouseOver() {\n    this._thumbVisible = true;\n    this._thumbFade = false;\n  }\n\n  private _onComponentMouseOverBound = this._onComponentMouseOver.bind(this);\n\n  private _onComponentMouseOut() {\n    if (!this._thumbActive) {\n      this._thumbVisible = false;\n      this._thumbFade = true;\n    }\n  }\n\n  private _onComponentMouseOutBound = this._onComponentMouseOut.bind(this);\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          'scrollable-container': true,\n          dragging: this._isDragging,\n        })}\n      >\n        <div class=${classMap({shadow: true, visible: this.scrolled})}></div>\n        ${this._isDragging\n          ? html`<div class=\"prevent-interaction\"></div>`\n          : nothing}\n        <div\n          class=${classMap({\n            'scrollbar-track': true,\n            hidden: !this._scrollbarVisible,\n          })}\n        >\n          <div\n            class=${classMap({\n              'scrollbar-thumb': true,\n              visible: this._thumbVisible,\n              fade: this._thumbFade,\n              active: this._thumbActive,\n            })}\n            @mousedown=${this._onScrollThumbMouseDown}\n          ></div>\n        </div>\n        <div class=\"content\">\n          <slot @slotchange=${this._onSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-scrollable': VscodeScrollable;\n  }\n}\n"]}

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

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

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

@@ -13,6 +13,10 @@ const styles = [
       overflow: auto;
     }
 
+    .scrollable-container.dragging {
+      user-select: none;
+    }
+
     .scrollable-container::-webkit-scrollbar {
       cursor: default;
       width: 0;
@@ -44,7 +48,7 @@ const styles = [
       right: 0;
       top: 0;
       width: 10px;
-      z-index: 100;
+      z-index: var(--scrollbar-track-z, 100);
     }
 
     .scrollbar-track.hidden {

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-scrollable.styles.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2FF;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      position: relative;\n    }\n\n    .scrollable-container {\n      height: 100%;\n      overflow: auto;\n    }\n\n    .scrollable-container::-webkit-scrollbar {\n      cursor: default;\n      width: 0;\n    }\n\n    .scrollable-container {\n      scrollbar-width: none;\n    }\n\n    .shadow {\n      box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;\n      display: none;\n      height: 3px;\n      left: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      z-index: 1;\n      width: 100%;\n    }\n\n    .shadow.visible {\n      display: block;\n    }\n\n    .scrollbar-track {\n      height: 100%;\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 10px;\n      z-index: 100;\n    }\n\n    .scrollbar-track.hidden {\n      display: none;\n    }\n\n    .scrollbar-thumb {\n      background-color: transparent;\n      min-height: var(--min-thumb-height, 20px);\n      opacity: 0;\n      position: absolute;\n      right: 0;\n      width: 10px;\n    }\n\n    .scrollbar-thumb.visible {\n      background-color: var(--vscode-scrollbarSlider-background);\n      opacity: 1;\n      transition: opacity 100ms;\n    }\n\n    .scrollbar-thumb.fade {\n      background-color: var(--vscode-scrollbarSlider-background);\n      opacity: 0;\n      transition: opacity 800ms;\n    }\n\n    .scrollbar-thumb.visible:hover {\n      background-color: var(--vscode-scrollbarSlider-hoverBackground);\n    }\n\n    .scrollbar-thumb.visible.active,\n    .scrollbar-thumb.visible.active:hover {\n      background-color: var(--vscode-scrollbarSlider-activeBackground);\n    }\n\n    .prevent-interaction {\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n      position: absolute;\n      z-index: 99;\n    }\n\n    .content {\n      overflow: hidden;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-scrollable.styles.js","sourceRoot":"","sources":["../../src/vscode-scrollable/vscode-scrollable.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FF;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      position: relative;\n    }\n\n    .scrollable-container {\n      height: 100%;\n      overflow: auto;\n    }\n\n    .scrollable-container.dragging {\n      user-select: none;\n    }\n\n    .scrollable-container::-webkit-scrollbar {\n      cursor: default;\n      width: 0;\n    }\n\n    .scrollable-container {\n      scrollbar-width: none;\n    }\n\n    .shadow {\n      box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;\n      display: none;\n      height: 3px;\n      left: 0;\n      pointer-events: none;\n      position: absolute;\n      top: 0;\n      z-index: 1;\n      width: 100%;\n    }\n\n    .shadow.visible {\n      display: block;\n    }\n\n    .scrollbar-track {\n      height: 100%;\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: 10px;\n      z-index: var(--scrollbar-track-z, 100);\n    }\n\n    .scrollbar-track.hidden {\n      display: none;\n    }\n\n    .scrollbar-thumb {\n      background-color: transparent;\n      min-height: var(--min-thumb-height, 20px);\n      opacity: 0;\n      position: absolute;\n      right: 0;\n      width: 10px;\n    }\n\n    .scrollbar-thumb.visible {\n      background-color: var(--vscode-scrollbarSlider-background);\n      opacity: 1;\n      transition: opacity 100ms;\n    }\n\n    .scrollbar-thumb.fade {\n      background-color: var(--vscode-scrollbarSlider-background);\n      opacity: 0;\n      transition: opacity 800ms;\n    }\n\n    .scrollbar-thumb.visible:hover {\n      background-color: var(--vscode-scrollbarSlider-hoverBackground);\n    }\n\n    .scrollbar-thumb.visible.active,\n    .scrollbar-thumb.visible.active:hover {\n      background-color: var(--vscode-scrollbarSlider-activeBackground);\n    }\n\n    .prevent-interaction {\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n      position: absolute;\n      z-index: 99;\n    }\n\n    .content {\n      overflow: hidden;\n    }\n  `,\n];\n\nexport default styles;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-textarea.d.ts","sourceRoot":"","sources":["../../src/vscode-textarea/vscode-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAKrE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,cACX,SAAQ,UACR,YAAW,qBAAqB;IAEhC,MAAM,CAAC,MAAM,+BAAU;IAEvB;;OAEG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAIF,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,SAAS,CAAa;IAGnD,SAAS,UAAS;IAGlB,YAAY,SAAM;IAGlB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,SAAS,EAAE,MAAM,GAAG,SAAS,CAAa;IAG1C,SAAS,EAAE,MAAM,GAAG,SAAS,CAAa;IAG1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAa;IAG5C,QAAQ,UAAS;IAGjB,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAU;IAG7D,QAAQ,UAAS;IAGjB,UAAU,UAAS;IAEnB;;;OAGG;IAEH,SAAS,UAAS;IAElB,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAGpB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,mBAAmB,CAExC;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,gBAAgB;IAChB,IAAI,IAAI,IAAI,UAAU,CAErB;IAED,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAG,EAAE,MAAM,EAExB;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAG,EAAE,MAAM,EAExB;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;;IAQD,iBAAiB,IAAI,IAAI;IAUzB,OAAO,CACL,iBAAiB,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACrE,IAAI;IAaP,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAIzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAMP,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAKzB,OAAO,CAAC,WAAW,CAAuB;IAG1C,OAAO,CAAC,MAAM,CAAM;IAGpB,OAAO,CAAC,sBAAsB,CAAS;IAGvC,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,aAAa;IAIrB,MAAM,IAAI,cAAc;CAsCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}
+{"version":3,"file":"vscode-textarea.d.ts","sourceRoot":"","sources":["../../src/vscode-textarea/vscode-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAE,cAAc,EAAC,MAAM,KAAK,CAAC;AAIrE,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,cACX,SAAQ,UACR,YAAW,qBAAqB;IAEhC,MAAM,CAAC,MAAM,+BAAU;IAEvB;;OAEG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAIF,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,SAAS,CAAa;IAGnD,SAAS,UAAS;IAGlB,YAAY,SAAM;IAGlB,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,KAAK,SAAM;IAGX,SAAS,EAAE,MAAM,GAAG,SAAS,CAAa;IAG1C,SAAS,EAAE,MAAM,GAAG,SAAS,CAAa;IAG1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAGrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAa;IAG5C,QAAQ,UAAS;IAGjB,MAAM,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAU;IAG7D,QAAQ,UAAS;IAGjB,UAAU,UAAS;IAEnB;;;OAGG;IAEH,SAAS,UAAS;IAElB,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAGpB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,mBAAmB,CAExC;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,gBAAgB;IAChB,IAAI,IAAI,IAAI,UAAU,CAErB;IAED,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAG,EAAE,MAAM,EAExB;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAG,EAAE,MAAM,EAExB;IAED,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;;IAQD,iBAAiB,IAAI,IAAI;IAUzB,OAAO,CACL,iBAAiB,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACrE,IAAI;IAaP,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAIzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAMP,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAKzB,OAAO,CAAC,WAAW,CAAuB;IAG1C,OAAO,CAAC,MAAM,CAAM;IAGpB,OAAO,CAAC,sBAAsB,CAAS;IAGvC,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,aAAa;IAIrB,MAAM,IAAI,cAAc;CAsCzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/vscode-textarea/vscode-textarea.js

@@ -8,7 +8,6 @@ import { html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { VscElement } from '../includes/VscElement.js';
 import styles from './vscode-textarea.styles.js';
 /**
@@ -218,9 +217,9 @@ let VscodeTextarea = class VscodeTextarea extends VscElement {
         name=${ifDefined(this.name)}
         placeholder=${ifDefined(this.placeholder)}
         ?readonly=${this.readonly}
-        style=${styleMap({
+        .style=${{
             resize: this.resize,
-        })}
+        }}
         ?required=${this.required}
         spellcheck=${this.spellcheck}
         @change=${this._handleChange}

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-textarea.js","sourceRoot":"","sources":["../../src/vscode-textarea/vscode-textarea.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiC,MAAM,KAAK,CAAC;AACrE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACrD,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEI,IAAM,cAAc,GAApB,MAAM,cACX,SAAQ,UAAU;IAyElB,IAAI,KAAK,CAAC,GAAW;QACnB,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAClB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;IAC9B,CAAC;IAED,gBAAgB;IAChB,IAAI,IAAI;QACN,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;IAC3C,CAAC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;IACtC,CAAC;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAW;QACvB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;IACvB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,IAAI,SAAS,CAAC,GAAW;QACvB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;IACvB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IACD,aAAa;IAEb;QACE,KAAK,EAAE,CAAC;QAtHV,sCAAsC;QAEtC,iBAAY,GAA6B,SAAS,CAAC;QAGnD,cAAS,GAAG,KAAK,CAAC;QAGlB,iBAAY,GAAG,EAAE,CAAC;QAGlB,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,UAAK,GAAG,EAAE,CAAC;QAGX,cAAS,GAAuB,SAAS,CAAC;QAG1C,cAAS,GAAuB,SAAS,CAAC;QAG1C,SAAI,GAAuB,SAAS,CAAC;QAGrC,SAAI,GAAuB,SAAS,CAAC;QAGrC,SAAI,GAAuB,SAAS,CAAC;QAGrC,gBAAW,GAAuB,SAAS,CAAC;QAG5C,aAAQ,GAAG,KAAK,CAAC;QAGjB,WAAM,GAAgD,MAAM,CAAC;QAG7D,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAAG,KAAK,CAAC;QAEnB;;;WAGG;QAEH,cAAS,GAAG,KAAK,CAAC;QAwHV,WAAM,GAAG,EAAE,CAAC;QAGZ,2BAAsB,GAAG,KAAK,CAAC;QAG/B,YAAO,GAAG,KAAK,CAAC;QA7DtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3C,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;YACjC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC7B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,CACL,iBAAsE;QAEtE,MAAM,sBAAsB,GAAG,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;QAEtE,KAAK,MAAM,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,EAAE,CAAC;YAC3C,IAAI,sBAAsB,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;gBACjD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;oBAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC/B,CAAC,CAAC,CAAC;gBACH,MAAM;YACR,CAAC;QACH,CAAC;IACH,CAAC;IAED,gBAAgB;IAChB,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IACjC,CAAC;IAED,gBAAgB;IAChB,wBAAwB,CACtB,KAAa,EACb,KAAiC;QAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;IACzC,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;IAC1C,CAAC;IAgBO,qBAAqB;QAC3B,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,IAAI,CAAC,WAAW,CAAC,QAAQ,EACzB,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAClC,IAAI,CAAC,WAAW,CACjB,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;QACrC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACvD,CAAC;IAEO,aAAa,CAAC,EAAS;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxC,kBAAkB;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;YAC5B,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAC;SAC9C,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,EAAc;QACjC,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,kBAAkB;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,MAAM,EAAE,EAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,EAAE,EAAC;SAC3C,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,gBAAgB,CAAC,EAAc;QACrC,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,CAAC;YACnE,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;YACpC,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,MAAM,YAAY,GAAG,CAAC,CAAC;QACvB,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;QACpD,MAAM,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC;QAErB,IAAI,CAAC,sBAAsB;YACzB,CAAC,IAAI,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,KAAK,GAAG,eAAe,GAAG,YAAY,GAAG,CAAC,CAAC;IACjE,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,CAAC,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI;YACZ,OAAO,EAAE,IAAI,CAAC,OAAO;SACtB,CAAC;;;uBAGa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC;qBAC9B,IAAI,CAAC,SAAS;oBACf,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,KAAK;;gBAEf,QAAQ,CAAC;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,gBAAgB,EAAE,IAAI,CAAC,sBAAsB;SAC9C,CAAC;oBACU,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;oBACzB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;eAC9B,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;eACpB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;eACpB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;sBACb,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;oBAC7B,IAAI,CAAC,QAAQ;gBACjB,QAAQ,CAAC;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;oBACU,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,UAAU;kBAClB,IAAI,CAAC,aAAa;iBACnB,IAAI,CAAC,YAAY;qBACb,IAAI,CAAC,gBAAgB;kBACxB,IAAI,CAAC,aAAa;iBACnB,IAAI,CAAC,MAAM;;KAEvB,CAAC;IACJ,CAAC;;AAjSM,qBAAM,GAAG,MAAM,AAAT,CAAU;AAEvB;;GAEG;AACI,6BAAc,GAAG,IAAI,AAAP,CAAQ;AAE7B,gBAAgB;AACA,gCAAiB,GAAmB;IAClD,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAIF;IADC,QAAQ,EAAE;oDACwC;AAGnD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACvB;AAGlB;IADC,QAAQ,CAAC,EAAC,SAAS,EAAE,eAAe,EAAC,CAAC;oDACrB;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CACzB;AAGhB;IADC,QAAQ,CAAC,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;6CAClB;AAGX;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDACiB;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDACiB;AAG1C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACY;AAGrC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACY;AAGrC;IADC,QAAQ,EAAE;4CAC0B;AAGrC;IADC,QAAQ,EAAE;mDACiC;AAG5C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDACxB;AAGjB;IADC,QAAQ,EAAE;8CACkD;AAG7D;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDACxB;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;kDACP;AAOnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACvB;AAGlB;IADC,QAAQ,EAAE;2CAIV;AA+GO;IADP,KAAK,CAAC,WAAW,CAAC;mDACuB;AAGlC;IADP,KAAK,EAAE;8CACY;AAGZ;IADP,KAAK,EAAE;8DAC+B;AAG/B;IADP,KAAK,EAAE;+CACgB;AArMb,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAsS1B","sourcesContent":["import {html, LitElement, TemplateResult, PropertyValues} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-textarea.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\n/**\n * Multi-line text input.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-textarea\n *\n * @fires {InputEvent} input\n * @fires {Event} change\n *\n * @cssprop --vscode-scrollbar-shadow\n * @cssprop --vscode-settings-textInputBackground\n * @cssprop --vscode-settings-textInputBorder\n * @cssprop --vscode-settings-textInputForeground\n * @cssprop --vscode-input-placeholderForeground\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-editor-background\n * @cssprop --vscode-editor-foreground\n * @cssprop --vscode-editor-font-family\n * @cssprop --vscode-editor-font-size\n * @cssprop --vscode-editor-font-weight\n * @cssprop --vscode-editor-inlineValuesForeground\n * @cssprop --vscode-focusBorder\n * @cssprop --vscode-scrollbarSlider-background\n * @cssprop --vscode-scrollbarSlider-hoverBackground\n * @cssprop --vscode-scrollbarSlider-activeBackground\n */\n@customElement('vscode-textarea')\nexport class VscodeTextarea\n  extends VscElement\n  implements AssociatedFormControl\n{\n  static styles = styles;\n\n  /**\n   * @internal\n   */\n  static formAssociated = true;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  // #region properties, setters/getters\n  @property()\n  autocomplete: 'on' | 'off' | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  autofocus = false;\n\n  @property({attribute: 'default-value'})\n  defaultValue = '';\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  invalid = false;\n\n  @property({attribute: false})\n  label = '';\n\n  @property({type: Number})\n  maxLength: number | undefined = undefined;\n\n  @property({type: Number})\n  minLength: number | undefined = undefined;\n\n  @property({type: Number})\n  rows: number | undefined = undefined;\n\n  @property({type: Number})\n  cols: number | undefined = undefined;\n\n  @property()\n  name: string | undefined = undefined;\n\n  @property()\n  placeholder: string | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  readonly = false;\n\n  @property()\n  resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'none';\n\n  @property({type: Boolean, reflect: true})\n  required = false;\n\n  @property({type: Boolean})\n  spellcheck = false;\n\n  /**\n   * Use monospace fonts. The font family, weight, size, and color will be the same as set in the\n   * VSCode code editor.\n   */\n  @property({type: Boolean, reflect: true})\n  monospace = false;\n\n  @property()\n  set value(val: string) {\n    this._value = val;\n    this._internals.setFormValue(val);\n  }\n\n  get value(): string {\n    return this._value;\n  }\n\n  /**\n   * Getter for the inner textarea element if it needs to be accessed for some reason.\n   */\n  get wrappedElement(): HTMLTextAreaElement {\n    return this._textareaEl;\n  }\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** @internal */\n  get type(): 'textarea' {\n    return 'textarea';\n  }\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n\n  /**\n   * Lowercase alias to minLength\n   */\n  set minlength(val: number) {\n    this.minLength = val;\n  }\n\n  get minlength(): number | undefined {\n    return this.minLength;\n  }\n\n  /**\n   * Lowercase alias to maxLength\n   */\n  set maxlength(val: number) {\n    this.maxLength = val;\n  }\n\n  get maxlength(): number | undefined {\n    return this.maxLength;\n  }\n  // #endregion\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this._textareaEl.checkValidity();\n      this._setValidityFromInput();\n      this._internals.setFormValue(this._textareaEl.value);\n    });\n  }\n\n  updated(\n    changedProperties: PropertyValues<unknown> | Map<PropertyKey, unknown>\n  ): void {\n    const validationRelatedProps = ['maxLength', 'minLength', 'required'];\n\n    for (const key of changedProperties.keys()) {\n      if (validationRelatedProps.includes(String(key))) {\n        this.updateComplete.then(() => {\n          this._setValidityFromInput();\n        });\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    this.updateComplete.then(() => {\n      this._value = state;\n    });\n  }\n\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  @query('#textarea')\n  private _textareaEl!: HTMLTextAreaElement;\n\n  @state()\n  private _value = '';\n\n  @state()\n  private _textareaPointerCursor = false;\n\n  @state()\n  private _shadow = false;\n\n  private _internals: ElementInternals;\n\n  private _setValidityFromInput() {\n    this._internals.setValidity(\n      this._textareaEl.validity,\n      this._textareaEl.validationMessage,\n      this._textareaEl\n    );\n  }\n\n  private _dataChanged() {\n    this._value = this._textareaEl.value;\n    this._internals.setFormValue(this._textareaEl.value);\n  }\n\n  private _handleChange(ev: Event) {\n    this._dataChanged();\n    this._setValidityFromInput();\n    this.dispatchEvent(new Event('change'));\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent('vsc-change', {\n        detail: {data: this.value, originalEvent: ev},\n      })\n    );\n  }\n\n  private _handleInput(ev: InputEvent) {\n    this._dataChanged();\n    this._setValidityFromInput();\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent('vsc-input', {\n        detail: {data: ev.data, originalEvent: ev},\n      })\n    );\n  }\n\n  private _handleMouseMove(ev: MouseEvent) {\n    if (this._textareaEl.clientHeight >= this._textareaEl.scrollHeight) {\n      this._textareaPointerCursor = false;\n      return;\n    }\n\n    const SCROLLBAR_WIDTH = 14;\n    const BORDER_WIDTH = 1;\n    const br = this._textareaEl.getBoundingClientRect();\n    const x = ev.clientX;\n\n    this._textareaPointerCursor =\n      x >= br.left + br.width - SCROLLBAR_WIDTH - BORDER_WIDTH * 2;\n  }\n\n  private _handleScroll() {\n    this._shadow = this._textareaEl.scrollTop > 0;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          shadow: true,\n          visible: this._shadow,\n        })}\n      ></div>\n      <textarea\n        autocomplete=${ifDefined(this.autocomplete)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        aria-label=${this.label}\n        id=\"textarea\"\n        class=${classMap({\n          monospace: this.monospace,\n          'cursor-pointer': this._textareaPointerCursor,\n        })}\n        maxlength=${ifDefined(this.maxLength)}\n        minlength=${ifDefined(this.minLength)}\n        rows=${ifDefined(this.rows)}\n        cols=${ifDefined(this.cols)}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        ?readonly=${this.readonly}\n        style=${styleMap({\n          resize: this.resize,\n        })}\n        ?required=${this.required}\n        spellcheck=${this.spellcheck}\n        @change=${this._handleChange}\n        @input=${this._handleInput}\n        @mousemove=${this._handleMouseMove}\n        @scroll=${this._handleScroll}\n        .value=${this._value}\n      ></textarea>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-textarea': VscodeTextarea;\n  }\n}\n"]}
+{"version":3,"file":"vscode-textarea.js","sourceRoot":"","sources":["../../src/vscode-textarea/vscode-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult, PropertyValues} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-textarea.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\n/**\n * Multi-line text input.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-textarea\n *\n * @fires {InputEvent} input\n * @fires {Event} change\n *\n * @cssprop --vscode-scrollbar-shadow\n * @cssprop --vscode-settings-textInputBackground\n * @cssprop --vscode-settings-textInputBorder\n * @cssprop --vscode-settings-textInputForeground\n * @cssprop --vscode-input-placeholderForeground\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-editor-background\n * @cssprop --vscode-editor-foreground\n * @cssprop --vscode-editor-font-family\n * @cssprop --vscode-editor-font-size\n * @cssprop --vscode-editor-font-weight\n * @cssprop --vscode-editor-inlineValuesForeground\n * @cssprop --vscode-focusBorder\n * @cssprop --vscode-scrollbarSlider-background\n * @cssprop --vscode-scrollbarSlider-hoverBackground\n * @cssprop --vscode-scrollbarSlider-activeBackground\n */\n@customElement('vscode-textarea')\nexport class VscodeTextarea\n  extends VscElement\n  implements AssociatedFormControl\n{\n  static styles = styles;\n\n  /**\n   * @internal\n   */\n  static formAssociated = true;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  // #region properties, setters/getters\n  @property()\n  autocomplete: 'on' | 'off' | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  autofocus = false;\n\n  @property({attribute: 'default-value'})\n  defaultValue = '';\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  invalid = false;\n\n  @property({attribute: false})\n  label = '';\n\n  @property({type: Number})\n  maxLength: number | undefined = undefined;\n\n  @property({type: Number})\n  minLength: number | undefined = undefined;\n\n  @property({type: Number})\n  rows: number | undefined = undefined;\n\n  @property({type: Number})\n  cols: number | undefined = undefined;\n\n  @property()\n  name: string | undefined = undefined;\n\n  @property()\n  placeholder: string | undefined = undefined;\n\n  @property({type: Boolean, reflect: true})\n  readonly = false;\n\n  @property()\n  resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'none';\n\n  @property({type: Boolean, reflect: true})\n  required = false;\n\n  @property({type: Boolean})\n  spellcheck = false;\n\n  /**\n   * Use monospace fonts. The font family, weight, size, and color will be the same as set in the\n   * VSCode code editor.\n   */\n  @property({type: Boolean, reflect: true})\n  monospace = false;\n\n  @property()\n  set value(val: string) {\n    this._value = val;\n    this._internals.setFormValue(val);\n  }\n\n  get value(): string {\n    return this._value;\n  }\n\n  /**\n   * Getter for the inner textarea element if it needs to be accessed for some reason.\n   */\n  get wrappedElement(): HTMLTextAreaElement {\n    return this._textareaEl;\n  }\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** @internal */\n  get type(): 'textarea' {\n    return 'textarea';\n  }\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n\n  /**\n   * Lowercase alias to minLength\n   */\n  set minlength(val: number) {\n    this.minLength = val;\n  }\n\n  get minlength(): number | undefined {\n    return this.minLength;\n  }\n\n  /**\n   * Lowercase alias to maxLength\n   */\n  set maxlength(val: number) {\n    this.maxLength = val;\n  }\n\n  get maxlength(): number | undefined {\n    return this.maxLength;\n  }\n  // #endregion\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this._textareaEl.checkValidity();\n      this._setValidityFromInput();\n      this._internals.setFormValue(this._textareaEl.value);\n    });\n  }\n\n  updated(\n    changedProperties: PropertyValues<unknown> | Map<PropertyKey, unknown>\n  ): void {\n    const validationRelatedProps = ['maxLength', 'minLength', 'required'];\n\n    for (const key of changedProperties.keys()) {\n      if (validationRelatedProps.includes(String(key))) {\n        this.updateComplete.then(() => {\n          this._setValidityFromInput();\n        });\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    this.updateComplete.then(() => {\n      this._value = state;\n    });\n  }\n\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  @query('#textarea')\n  private _textareaEl!: HTMLTextAreaElement;\n\n  @state()\n  private _value = '';\n\n  @state()\n  private _textareaPointerCursor = false;\n\n  @state()\n  private _shadow = false;\n\n  private _internals: ElementInternals;\n\n  private _setValidityFromInput() {\n    this._internals.setValidity(\n      this._textareaEl.validity,\n      this._textareaEl.validationMessage,\n      this._textareaEl\n    );\n  }\n\n  private _dataChanged() {\n    this._value = this._textareaEl.value;\n    this._internals.setFormValue(this._textareaEl.value);\n  }\n\n  private _handleChange(ev: Event) {\n    this._dataChanged();\n    this._setValidityFromInput();\n    this.dispatchEvent(new Event('change'));\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent('vsc-change', {\n        detail: {data: this.value, originalEvent: ev},\n      })\n    );\n  }\n\n  private _handleInput(ev: InputEvent) {\n    this._dataChanged();\n    this._setValidityFromInput();\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent('vsc-input', {\n        detail: {data: ev.data, originalEvent: ev},\n      })\n    );\n  }\n\n  private _handleMouseMove(ev: MouseEvent) {\n    if (this._textareaEl.clientHeight >= this._textareaEl.scrollHeight) {\n      this._textareaPointerCursor = false;\n      return;\n    }\n\n    const SCROLLBAR_WIDTH = 14;\n    const BORDER_WIDTH = 1;\n    const br = this._textareaEl.getBoundingClientRect();\n    const x = ev.clientX;\n\n    this._textareaPointerCursor =\n      x >= br.left + br.width - SCROLLBAR_WIDTH - BORDER_WIDTH * 2;\n  }\n\n  private _handleScroll() {\n    this._shadow = this._textareaEl.scrollTop > 0;\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div\n        class=${classMap({\n          shadow: true,\n          visible: this._shadow,\n        })}\n      ></div>\n      <textarea\n        autocomplete=${ifDefined(this.autocomplete)}\n        ?autofocus=${this.autofocus}\n        ?disabled=${this.disabled}\n        aria-label=${this.label}\n        id=\"textarea\"\n        class=${classMap({\n          monospace: this.monospace,\n          'cursor-pointer': this._textareaPointerCursor,\n        })}\n        maxlength=${ifDefined(this.maxLength)}\n        minlength=${ifDefined(this.minLength)}\n        rows=${ifDefined(this.rows)}\n        cols=${ifDefined(this.cols)}\n        name=${ifDefined(this.name)}\n        placeholder=${ifDefined(this.placeholder)}\n        ?readonly=${this.readonly}\n        .style=${{\n          resize: this.resize,\n        }}\n        ?required=${this.required}\n        spellcheck=${this.spellcheck}\n        @change=${this._handleChange}\n        @input=${this._handleInput}\n        @mousemove=${this._handleMouseMove}\n        @scroll=${this._handleScroll}\n        .value=${this._value}\n      ></textarea>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-textarea': VscodeTextarea;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode-elements/elements",
-  "version": "1.11.0",
+  "version": "1.11.1-pre.1",
   "description": "Webcomponents for creating Visual Studio Code extensions",
   "main": "dist/main.js",
   "module": "dist/main.js",
@@ -154,7 +154,7 @@
     "@types/node": "^22.10.5",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
-    "@vscode-elements/webview-playground": "^1.3.0",
+    "@vscode-elements/webview-playground": "^1.4.0",
     "@vscode/codicons": "^0.0.36",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.3",