npm - @vscode-elements/elements - Versions diffs - 2.0.0 → 2.1.0 - Mend

@vscode-elements/elements 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/vscode-collapsible/vscode-collapsible.js CHANGED Viewed

@@ -32,6 +32,12 @@ import styles from './vscode-collapsible.styles.js';
 let VscodeCollapsible = class VscodeCollapsible extends VscElement {
     constructor() {
         super(...arguments);
+        /**
+         * When enabled, header actions are always visible; otherwise, they appear only when the cursor
+         * hovers over the component. Actions are shown only when the Collapsible component is open. This
+         * property is designed to use the `workbench.view.alwaysShowHeaderActions` setting.
+         */
+        this.alwaysShowHeaderActions = false;
         /**
          * Component heading text
          *
@@ -63,7 +69,11 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
         }
     }
     render() {
-        const classes = classMap({ collapsible: true, open: this.open });
+        const classes = { collapsible: true, open: this.open };
+        const actionsClasses = {
+            actions: true,
+            'always-visible': this.alwaysShowHeaderActions,
+        };
         const heading = this.heading ? this.heading : this.title;
         const icon = html `<svg
       width="16"
@@ -83,7 +93,7 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
             ? html `<span class="description">${this.description}</span>`
             : nothing;
         return html `
-      <div class=${classes}>
+      <div class=${classMap(classes)}>
         <div
           class="collapsible-header"
           tabindex="0"
@@ -93,7 +103,9 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
           ${icon}
           <h3 class="title">${heading}${descriptionMarkup}</h3>
           <div class="header-slots">
-            <div class="actions"><slot name="actions"></slot></div>
+            <div class=${classMap(actionsClasses)}>
+              <slot name="actions"></slot>
+            </div>
             <div class="decorations"><slot name="decorations"></slot></div>
           </div>
         </div>
@@ -105,6 +117,13 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
     }
 };
 VscodeCollapsible.styles = styles;
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'always-show-header-actions',
+    })
+], VscodeCollapsible.prototype, "alwaysShowHeaderActions", void 0);
 __decorate([
     property({ type: String })
 ], VscodeCollapsible.prototype, "title", void 0);

package/dist/vscode-collapsible/vscode-collapsible.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vscode-collapsible.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAGL;;;;;WAKG;QAEM,UAAK,GAAW,EAAE,CAAC;QAE5B;;WAEG;QAEH,YAAO,GAAG,EAAE,CAAC;QAEb,yCAAyC;QAEzC,gBAAW,GAAG,EAAE,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;~~IAkEf~~,CAAC;~~IAhES~~,gBAAgB;QACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,wBAAwB,EAAE;YACxC,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC;SAC1B,CAA8B,CAChC,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB,CAAC,KAAoB;QAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,~~QAAQ,CAAC,~~EAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC;~~QAC~~/D,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAEzD,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;;;;;;WAaV,CAAC;QAER,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,SAAS;YAC5D,CAAC,CAAC,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;mBACI,OAAO;;;;~~mBAIP~~,IAAI,CAAC,cAAc;qBACjB,IAAI,CAAC,gBAAgB;;YAE9B,IAAI;8BACc,OAAO,GAAG,iBAAiB;;;;;;;;;;~~KAUpD~~,CAAC;IACJ,CAAC;;~~AAvFe~~,wBAAM,GAAG,MAAM,AAAT,CAAU;AASvB;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACG;AAM5B;IADC,QAAQ,EAAE;kDACE;AAIb;IADC,QAAQ,EAAE;sDACM;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC5B;~~AAvBF~~,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,~~CAyF7B~~","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-collapsible.styles.js';\n\nexport type VscCollapsibleToggleEvent = CustomEvent<{open: boolean}>;\n\n/*\n Allows users to reveal or hide related content on a page.\n \n @tag vscode-collapsible\n \n @slot - Main content.\n * @slot actions - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n * @slot decorations - The elements placed in the decorations slot are always visible.\n \n @fires {VscCollapsibleToggleEvent} vsc-collapsible-toggle - Dispatched when the content visibility is changed.\n \n @cssprop [--vscode-sideBar-background=#181818] - Background color\n * @cssprop [--vscode-focusBorder=#0078d4] - Focus border color\n * @cssprop [--vscode-font-family=sans-serif] - Header font family\n * @cssprop [--vscode-sideBarSectionHeader-background=#181818] - Header background\n * @cssprop [--vscode-icon-foreground=#cccccc] - Arrow icon color\n * @cssprop [--vscode-sideBarTitle-foreground=#cccccc] - Header font color\n \n @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior.\n /\n@customElement('vscode-collapsible')\nexport class VscodeCollapsible extends VscElement {\n static override styles = styles;\n\n /\n Component heading text\n \n @deprecated The `title` is a global HTML attribute and will unintentionally trigger a native\n * tooltip on the component. Use the `heading` property instead.\n /\n @property({type: String})\n override title: string = '';\n\n /\n Heading text.\n /\n @property()\n heading = '';\n\n /* Less prominent text in the header. */\n @property()\n description = '';\n\n @property({type: Boolean, reflect: true})\n open = false;\n\n private _emitToggleEvent() {\n this.dispatchEvent(\n new CustomEvent('vsc-collapsible-toggle', {\n detail: {open: this.open},\n }) as VscCollapsibleToggleEvent\n );\n }\n\n private _onHeaderClick() {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n\n private _onHeaderKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n }\n\n override render(): TemplateResult {\n const classes = ~~classMap(~~{collapsible: true, open: this.open});\n const heading = this.heading ? this.heading : this.title;\n\n const icon = html`<svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n class=\"header-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z\"\n />\n </svg>`;\n\n const descriptionMarkup = this.description\n ? html`<span class=\"description\">${this.description}</span>`\n : nothing;\n\n return html`\n <div class=${classes}>\n <div\n class=\"collapsible-header\"\n tabindex=\"0\"\n @click=${this._onHeaderClick}\n @keydown=${this._onHeaderKeyDown}\n >\n ${icon}\n <h3 class=\"title\">${heading}${descriptionMarkup}</h3>\n <div class=\"header-slots\">\n <div class~~=\"actions\"><~~slot name=\"actions\"></slot~~></~~div>\n <div class=\"decorations\"><slot name=\"decorations\"></slot></div>\n </div>\n </div>\n <div class=\"collapsible-body\" part=\"body\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-collapsible': VscodeCollapsible;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-collapsible-toggle': VscCollapsibleToggleEvent;\n }\n}\n"]}
1	+ {"version":3,"file":"vscode-collapsible.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AACrD,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;GAmBG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAGL;;;;WAIG;QAMH,4BAAuB,GAAG,KAAK,CAAC;QAEhC;;;;;WAKG;QAEM,UAAK,GAAW,EAAE,CAAC;QAE5B;;WAEG;QAEH,YAAO,GAAG,EAAE,CAAC;QAEb,yCAAyC;QAEzC,gBAAW,GAAG,EAAE,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAwEf,CAAC;IAtES,gBAAgB;QACtB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,wBAAwB,EAAE;YACxC,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC;SAC1B,CAA8B,CAChC,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB,CAAC,KAAoB;QAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,EAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC;QACrD,MAAM,cAAc,GAAG;YACrB,OAAO,EAAE,IAAI;YACb,gBAAgB,EAAE,IAAI,CAAC,uBAAuB;SAC/C,CAAC;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAEzD,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;;;;;;WAaV,CAAC;QAER,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW;YACxC,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,WAAW,SAAS;YAC5D,CAAC,CAAC,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC,OAAO,CAAC;;;;mBAIjB,IAAI,CAAC,cAAc;qBACjB,IAAI,CAAC,gBAAgB;;YAE9B,IAAI;8BACc,OAAO,GAAG,iBAAiB;;yBAEhC,QAAQ,CAAC,cAAc,CAAC;;;;;;;;;;KAU5C,CAAC;IACJ,CAAC;;AAzGe,wBAAM,GAAG,MAAM,AAAT,CAAU;AAYhC;IALC,QAAQ,CAAC;QACR,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,4BAA4B;KACxC,CAAC;kEAC8B;AASvB;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACG;AAM5B;IADC,QAAQ,EAAE;kDACE;AAIb;IADC,QAAQ,EAAE;sDACM;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC5B;AAnCF,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CA2G7B","sourcesContent":["import {html, nothing, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-collapsible.styles.js';\n\nexport type VscCollapsibleToggleEvent = CustomEvent<{open: boolean}>;\n\n/*\n Allows users to reveal or hide related content on a page.\n \n @tag vscode-collapsible\n \n @slot - Main content.\n * @slot actions - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n * @slot decorations - The elements placed in the decorations slot are always visible.\n \n @fires {VscCollapsibleToggleEvent} vsc-collapsible-toggle - Dispatched when the content visibility is changed.\n \n @cssprop [--vscode-sideBar-background=#181818] - Background color\n * @cssprop [--vscode-focusBorder=#0078d4] - Focus border color\n * @cssprop [--vscode-font-family=sans-serif] - Header font family\n * @cssprop [--vscode-sideBarSectionHeader-background=#181818] - Header background\n * @cssprop [--vscode-icon-foreground=#cccccc] - Arrow icon color\n * @cssprop [--vscode-sideBarTitle-foreground=#cccccc] - Header font color\n \n @csspart body - Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior.\n /\n@customElement('vscode-collapsible')\nexport class VscodeCollapsible extends VscElement {\n static override styles = styles;\n\n /\n When enabled, header actions are always visible; otherwise, they appear only when the cursor\n * hovers over the component. Actions are shown only when the Collapsible component is open. This\n * property is designed to use the `workbench.view.alwaysShowHeaderActions` setting.\n /\n @property({\n type: Boolean,\n reflect: true,\n attribute: 'always-show-header-actions',\n })\n alwaysShowHeaderActions = false;\n\n /\n Component heading text\n \n @deprecated The `title` is a global HTML attribute and will unintentionally trigger a native\n * tooltip on the component. Use the `heading` property instead.\n /\n @property({type: String})\n override title: string = '';\n\n /\n Heading text.\n /\n @property()\n heading = '';\n\n /* Less prominent text in the header. */\n @property()\n description = '';\n\n @property({type: Boolean, reflect: true})\n open = false;\n\n private _emitToggleEvent() {\n this.dispatchEvent(\n new CustomEvent('vsc-collapsible-toggle', {\n detail: {open: this.open},\n }) as VscCollapsibleToggleEvent\n );\n }\n\n private _onHeaderClick() {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n\n private _onHeaderKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter') {\n this.open = !this.open;\n this._emitToggleEvent();\n }\n }\n\n override render(): TemplateResult {\n const classes = {collapsible: true, open: this.open};\n const actionsClasses = {\n actions: true,\n 'always-visible': this.alwaysShowHeaderActions,\n };\n const heading = this.heading ? this.heading : this.title;\n\n const icon = html`<svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n class=\"header-icon\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z\"\n />\n </svg>`;\n\n const descriptionMarkup = this.description\n ? html`<span class=\"description\">${this.description}</span>`\n : nothing;\n\n return html`\n <div class=${classMap(classes)}>\n <div\n class=\"collapsible-header\"\n tabindex=\"0\"\n @click=${this._onHeaderClick}\n @keydown=${this._onHeaderKeyDown}\n >\n ${icon}\n <h3 class=\"title\">${heading}${descriptionMarkup}</h3>\n <div class=\"header-slots\">\n <div class=${classMap(actionsClasses)}>\n <slot name=\"actions\"></slot>\n </div>\n <div class=\"decorations\"><slot name=\"decorations\"></slot></div>\n </div>\n </div>\n <div class=\"collapsible-body\" part=\"body\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-collapsible': VscodeCollapsible;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-collapsible-toggle': VscCollapsibleToggleEvent;\n }\n}\n"]}

package/dist/vscode-collapsible/vscode-collapsible.styles.d.ts.map CHANGED Viewed

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

package/dist/vscode-collapsible/vscode-collapsible.styles.js CHANGED Viewed

@@ -68,7 +68,8 @@ const styles = [
       display: none;
     }
-    .collapsible.open .actions {
+    .collapsible.open .actions.always-visible,
+    .collapsible.open:hover .actions {
       display: block;
     }

package/dist/vscode-collapsible/vscode-collapsible.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vscode-collapsible.styles.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.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~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFF~~;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 .collapsible {\n background-color: var(--vscode-sideBar-background, #181818);\n }\n\n .collapsible-header {\n align-items: center;\n background-color: var(--vscode-sideBarSectionHeader-background, #181818);\n cursor: pointer;\n display: flex;\n height: 22px;\n line-height: 22px;\n user-select: none;\n }\n\n .collapsible-header:focus {\n opacity: 1;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: 1px;\n outline-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .title {\n color: var(--vscode-sideBarTitle-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: 11px;\n font-weight: 700;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .title .description {\n font-weight: 400;\n margin-left: 10px;\n text-transform: none;\n opacity: 0.6;\n }\n\n .header-icon {\n color: var(--vscode-icon-foreground, #cccccc);\n display: block;\n flex-shrink: 0;\n margin: 0 3px;\n }\n\n .collapsible.open .header-icon {\n transform: rotate(90deg);\n }\n\n .header-slots {\n align-items: center;\n display: flex;\n height: 22px;\n margin-left: auto;\n margin-right: 4px;\n }\n\n .actions {\n display: none;\n }\n\n .collapsible.open .actions {\n display: block;\n }\n\n .header-slots slot {\n display: flex;\n max-height: 22px;\n overflow: hidden;\n }\n\n .header-slots slot::slotted(div) {\n align-items: center;\n display: flex;\n }\n\n .collapsible-body {\n display: none;\n overflow: hidden;\n }\n\n .collapsible.open .collapsible-body {\n display: block;\n }\n `,\n];\n\nexport default styles;\n"]}
1	+ {"version":3,"file":"vscode-collapsible.styles.js","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FF;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 .collapsible {\n background-color: var(--vscode-sideBar-background, #181818);\n }\n\n .collapsible-header {\n align-items: center;\n background-color: var(--vscode-sideBarSectionHeader-background, #181818);\n cursor: pointer;\n display: flex;\n height: 22px;\n line-height: 22px;\n user-select: none;\n }\n\n .collapsible-header:focus {\n opacity: 1;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: 1px;\n outline-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .title {\n color: var(--vscode-sideBarTitle-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: 11px;\n font-weight: 700;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n .title .description {\n font-weight: 400;\n margin-left: 10px;\n text-transform: none;\n opacity: 0.6;\n }\n\n .header-icon {\n color: var(--vscode-icon-foreground, #cccccc);\n display: block;\n flex-shrink: 0;\n margin: 0 3px;\n }\n\n .collapsible.open .header-icon {\n transform: rotate(90deg);\n }\n\n .header-slots {\n align-items: center;\n display: flex;\n height: 22px;\n margin-left: auto;\n margin-right: 4px;\n }\n\n .actions {\n display: none;\n }\n\n .collapsible.open .actions.always-visible,\n .collapsible.open:hover .actions {\n display: block;\n }\n\n .header-slots slot {\n display: flex;\n max-height: 22px;\n overflow: hidden;\n }\n\n .header-slots slot::slotted(div) {\n align-items: center;\n display: flex;\n }\n\n .collapsible-body {\n display: none;\n overflow: hidden;\n }\n\n .collapsible.open .collapsible-body {\n display: block;\n }\n `,\n];\n\nexport default styles;\n"]}

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

@@ -23,7 +23,7 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
      * Scroll position.
      */
     set scrollPos(val) {
-        this._scrollPos = val;
+        this._scrollPos = this._limitScrollPos(val);
         this._updateScrollbar();
         this._updateThumbPosition();
         this.requestUpdate();

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

	@@ -1 +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, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-scrollable.styles.js';\n\nexport type VscScrollableScrollEvent = CustomEvent<number>;\n\n/*\n @tag vscode-scrollable\n \n @cssprop [--vscode-scrollbar-shadow=#000000]\n * @cssprop [--vscode-scrollbarSlider-background=rgba(121, 121, 121, 0.4)]\n * @cssprop [--vscode-scrollbarSlider-hoverBackground=rgba(100, 100, 100, 0.7)]\n * @cssprop [--vscode-scrollbarSlider-activeBackground=rgba(191, 191, 191, 0.4)]\n /\n@customElement('vscode-scrollable')\nexport class VscodeScrollable extends VscElement {\n static override styles = styles;\n\n /\n By default, the scrollbar appears only when the cursor hovers over the\n * component. With this option, the scrollbar will always be visible.\n /\n @property({type: Boolean, reflect: true, attribute: 'always-visible'})\n alwaysVisible = false;\n\n /\n Scrolling speed multiplier when pressing `Alt`. This property is designed to use the value of\n * `editor.fastScrollSensitivity`, `workbench.list.fastScrollSensitivity` or\n * `terminal.integrated.fastScrollSensitivity` depending on the context.\n /\n @property({type: Number, attribute: 'fast-scroll-sensitivity'})\n fastScrollSensitivity = 5;\n\n /\n This setting defines the scrollbar's minimum size when the component contains a large amount of content.\n /\n @property({type: Number, attribute: 'min-thumb-size'})\n minThumbSize = 20;\n\n /\n A multiplier to be used on the `deltaY` of the mouse wheel scroll events. This property is\n * designed to use the value of `editor.mouseWheelScrollSensitivity`,\n * `workbench.list.mouseWheelScrollSensitivity` or\n * `terminal.integrated.mouseWheelScrollSensitivity` depending on the context.\n /\n @property({type: Number, attribute: 'mouse-wheel-scroll-sensitivity'})\n mouseWheelScrollSensitivity = 1;\n\n /\n Controls shadow visibility when content overflows.\n /\n @property({type: Boolean, reflect: true})\n shadow = true;\n\n /\n It's true when `scrollPos` greater than 0\n /\n @property({type: Boolean, reflect: true})\n scrolled = false;\n\n /\n Scroll position.\n /\n @property({type: Number, attribute: 'scroll-pos'})\n set scrollPos(val: number) {\n this._scrollPos = val;\n this._updateScrollbar();\n this._updateThumbPosition();\n this.requestUpdate();\n }\n get scrollPos(): number {\n return this._scrollPos;\n }\n\n private _scrollPos = 0;\n\n /\n The maximum amount of the `scrollPos`.\n /\n get scrollMax(): number {\n if (!this._scrollableContainer) {\n return 0;\n }\n\n return (\n this._scrollableContainer.scrollHeight -\n this._scrollableContainer.clientHeight\n );\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', 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 private _scrollbarTrackZ = 0;\n\n //#region lifecycle methods\n\n constructor() {\n super();\n this.addEventListener('mouseover', this._handleComponentMouseOver);\n this.addEventListener('mouseout', this._handleComponentMouseOut);\n this.addEventListener('wheel', this._handleComponentWheel);\n }\n\n override 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._hostResizeObserver.observe(this);\n this._contentResizeObserver.observe(this._contentElement);\n this._updateThumbPosition();\n });\n }\n\n override 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\n protected override firstUpdated(_changedProperties: PropertyValues): void {\n this._updateThumbPosition();\n }\n\n //#endregion\n\n private _resizeObserverCallback = () => {\n this._updateScrollbar();\n this._updateThumbPosition();\n };\n\n private _calcThumbHeight() {\n const componentHeight = this.offsetHeight;\n const contentHeight = this._contentElement?.offsetHeight ?? 0;\n const proposedSize = componentHeight (componentHeight / contentHeight);\n\n return Math.max(this.minThumbSize, proposedSize);\n }\n\n private _updateScrollbar() {\n const contentHeight = this._contentElement?.offsetHeight ?? 0;\n const componentHeight = this.offsetHeight;\n\n if (componentHeight >= contentHeight) {\n this._scrollbarVisible = false;\n } else {\n this._scrollbarVisible = true;\n this._thumbHeight = this._calcThumbHeight();\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 _updateThumbPosition() {\n if (!this._scrollableContainer) {\n return;\n }\n\n this.scrolled = this.scrollPos > 0;\n\n const componentH = this.offsetHeight;\n const thumbH = this._thumbHeight;\n const contentH = this._contentElement.offsetHeight;\n\n const overflown = contentH - componentH;\n const ratio = this.scrollPos / overflown;\n const thumbYMax = componentH - thumbH;\n\n this._thumbY = Math.min(ratio * (componentH - thumbH), thumbYMax);\n }\n\n private _calculateScrollPosFromThumbPos(scrollPos: number) {\n const cmpH = this.getBoundingClientRect().height;\n const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n const contentH = this._contentElement.getBoundingClientRect().height;\n const rawScrollPos = (scrollPos / (cmpH - thumbH)) * (contentH - cmpH);\n\n return this._limitScrollPos(rawScrollPos);\n }\n\n private _limitScrollPos(newPos: number) {\n if (newPos < 0) {\n return 0;\n } else if (newPos > this.scrollMax) {\n return this.scrollMax;\n } else {\n return newPos;\n }\n }\n\n private _limitThumbPos(newPos: number) {\n const cmpH = this.getBoundingClientRect().height;\n const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n\n if (newPos < 0) {\n return 0;\n } else if (newPos > cmpH - thumbH) {\n return cmpH - thumbH;\n } else {\n return newPos;\n }\n }\n\n //#region event handlers\n private _handleSlotChange = () => {\n this._updateScrollbar();\n this._updateThumbPosition();\n this._zIndexFix();\n };\n\n private _handleScrollThumbMouseDown(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._handleScrollThumbMouseMove);\n document.addEventListener('mouseup', this._handleScrollThumbMouseUp);\n }\n\n private _handleScrollThumbMouseMove = (event: MouseEvent) => {\n const rawThumbPos =\n this._scrollThumbStartY + (event.screenY - this._mouseStartY);\n this._thumbY = this._limitThumbPos(rawThumbPos);\n this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);\n\n this.dispatchEvent(\n new CustomEvent('vsc-scrollable-scroll', {\n detail: this.scrollPos,\n })\n );\n };\n\n private _handleScrollThumbMouseUp = (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('mousemove', this._handleScrollThumbMouseMove);\n document.removeEventListener('mouseup', this._handleScrollThumbMouseUp);\n };\n\n private _handleComponentMouseOver = () => {\n this._thumbVisible = true;\n this._thumbFade = false;\n };\n\n private _handleComponentMouseOut = () => {\n if (!this._thumbActive) {\n this._thumbVisible = false;\n this._thumbFade = true;\n }\n };\n\n private _handleComponentWheel = (ev: WheelEvent) => {\n ev.preventDefault();\n\n const multiplier = ev.altKey\n ? this.mouseWheelScrollSensitivity * this.fastScrollSensitivity\n : this.mouseWheelScrollSensitivity;\n\n this.scrollPos = this._limitScrollPos(\n this.scrollPos + ev.deltaY * multiplier\n );\n this.dispatchEvent(\n new CustomEvent('vsc-scrollable-scroll', {\n detail: this.scrollPos,\n })\n );\n };\n\n private _handleScrollbarTrackPress(ev: PointerEvent) {\n if (ev.target !== ev.currentTarget) {\n return;\n }\n\n this._thumbY = ev.offsetY - this._thumbHeight / 2;\n this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);\n }\n\n private _handleScrollableContainerScroll = (ev: Event) => {\n if (ev.currentTarget) {\n this.scrollPos = (ev.currentTarget as HTMLDivElement).scrollTop;\n }\n };\n\n //#endregion\n\n override render(): TemplateResult {\n return html`\n <div\n class=\"scrollable-container\"\n .style=${stylePropertyMap({\n userSelect: this._isDragging ? 'none' : 'auto',\n })}\n .scrollTop=${this.scrollPos}\n @scroll=${this._handleScrollableContainerScroll}\n >\n <div\n class=${classMap({shadow: true, visible: this.scrolled})}\n .style=${stylePropertyMap({\n zIndex: String(this._scrollbarTrackZ),\n })}\n ></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 @mousedown=${this._handleScrollbarTrackPress}\n >\n <div\n class=${classMap({\n 'scrollbar-thumb': true,\n visible: this.alwaysVisible ? true : this._thumbVisible,\n fade: this.alwaysVisible ? false : this._thumbFade,\n active: this._thumbActive,\n })}\n .style=${stylePropertyMap({\n height: `${this._thumbHeight}px`,\n top: `${this._thumbY}px`,\n })}\n @mousedown=${this._handleScrollThumbMouseDown}\n ></div>\n </div>\n <div class=\"content\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-scrollable': VscodeScrollable;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-scrollable-scroll': VscScrollableScrollEvent;\n }\n}\n"]}
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, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport {stylePropertyMap} from '../includes/style-property-map.js';\nimport styles from './vscode-scrollable.styles.js';\n\nexport type VscScrollableScrollEvent = CustomEvent<number>;\n\n/*\n @tag vscode-scrollable\n \n @cssprop [--vscode-scrollbar-shadow=#000000]\n * @cssprop [--vscode-scrollbarSlider-background=rgba(121, 121, 121, 0.4)]\n * @cssprop [--vscode-scrollbarSlider-hoverBackground=rgba(100, 100, 100, 0.7)]\n * @cssprop [--vscode-scrollbarSlider-activeBackground=rgba(191, 191, 191, 0.4)]\n /\n@customElement('vscode-scrollable')\nexport class VscodeScrollable extends VscElement {\n static override styles = styles;\n\n /\n By default, the scrollbar appears only when the cursor hovers over the\n * component. With this option, the scrollbar will always be visible.\n /\n @property({type: Boolean, reflect: true, attribute: 'always-visible'})\n alwaysVisible = false;\n\n /\n Scrolling speed multiplier when pressing `Alt`. This property is designed to use the value of\n * `editor.fastScrollSensitivity`, `workbench.list.fastScrollSensitivity` or\n * `terminal.integrated.fastScrollSensitivity` depending on the context.\n /\n @property({type: Number, attribute: 'fast-scroll-sensitivity'})\n fastScrollSensitivity = 5;\n\n /\n This setting defines the scrollbar's minimum size when the component contains a large amount of content.\n /\n @property({type: Number, attribute: 'min-thumb-size'})\n minThumbSize = 20;\n\n /\n A multiplier to be used on the `deltaY` of the mouse wheel scroll events. This property is\n * designed to use the value of `editor.mouseWheelScrollSensitivity`,\n * `workbench.list.mouseWheelScrollSensitivity` or\n * `terminal.integrated.mouseWheelScrollSensitivity` depending on the context.\n /\n @property({type: Number, attribute: 'mouse-wheel-scroll-sensitivity'})\n mouseWheelScrollSensitivity = 1;\n\n /\n Controls shadow visibility when content overflows.\n /\n @property({type: Boolean, reflect: true})\n shadow = true;\n\n /\n It's true when `scrollPos` greater than 0\n /\n @property({type: Boolean, reflect: true})\n scrolled = false;\n\n /\n Scroll position.\n /\n @property({type: Number, attribute: 'scroll-pos'})\n set scrollPos(val: number) {\n this._scrollPos = this._limitScrollPos(val);\n this._updateScrollbar();\n this._updateThumbPosition();\n this.requestUpdate();\n }\n get scrollPos(): number {\n return this._scrollPos;\n }\n\n private _scrollPos = 0;\n\n /\n The maximum amount of the `scrollPos`.\n /\n get scrollMax(): number {\n if (!this._scrollableContainer) {\n return 0;\n }\n\n return (\n this._scrollableContainer.scrollHeight -\n this._scrollableContainer.clientHeight\n );\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', 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 private _scrollbarTrackZ = 0;\n\n //#region lifecycle methods\n\n constructor() {\n super();\n this.addEventListener('mouseover', this._handleComponentMouseOver);\n this.addEventListener('mouseout', this._handleComponentMouseOut);\n this.addEventListener('wheel', this._handleComponentWheel);\n }\n\n override 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._hostResizeObserver.observe(this);\n this._contentResizeObserver.observe(this._contentElement);\n this._updateThumbPosition();\n });\n }\n\n override 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\n protected override firstUpdated(_changedProperties: PropertyValues): void {\n this._updateThumbPosition();\n }\n\n //#endregion\n\n private _resizeObserverCallback = () => {\n this._updateScrollbar();\n this._updateThumbPosition();\n };\n\n private _calcThumbHeight() {\n const componentHeight = this.offsetHeight;\n const contentHeight = this._contentElement?.offsetHeight ?? 0;\n const proposedSize = componentHeight (componentHeight / contentHeight);\n\n return Math.max(this.minThumbSize, proposedSize);\n }\n\n private _updateScrollbar() {\n const contentHeight = this._contentElement?.offsetHeight ?? 0;\n const componentHeight = this.offsetHeight;\n\n if (componentHeight >= contentHeight) {\n this._scrollbarVisible = false;\n } else {\n this._scrollbarVisible = true;\n this._thumbHeight = this._calcThumbHeight();\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 _updateThumbPosition() {\n if (!this._scrollableContainer) {\n return;\n }\n\n this.scrolled = this.scrollPos > 0;\n\n const componentH = this.offsetHeight;\n const thumbH = this._thumbHeight;\n const contentH = this._contentElement.offsetHeight;\n\n const overflown = contentH - componentH;\n const ratio = this.scrollPos / overflown;\n const thumbYMax = componentH - thumbH;\n\n this._thumbY = Math.min(ratio * (componentH - thumbH), thumbYMax);\n }\n\n private _calculateScrollPosFromThumbPos(scrollPos: number) {\n const cmpH = this.getBoundingClientRect().height;\n const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n const contentH = this._contentElement.getBoundingClientRect().height;\n const rawScrollPos = (scrollPos / (cmpH - thumbH)) * (contentH - cmpH);\n\n return this._limitScrollPos(rawScrollPos);\n }\n\n private _limitScrollPos(newPos: number) {\n if (newPos < 0) {\n return 0;\n } else if (newPos > this.scrollMax) {\n return this.scrollMax;\n } else {\n return newPos;\n }\n }\n\n private _limitThumbPos(newPos: number) {\n const cmpH = this.getBoundingClientRect().height;\n const thumbH = this._scrollThumbElement.getBoundingClientRect().height;\n\n if (newPos < 0) {\n return 0;\n } else if (newPos > cmpH - thumbH) {\n return cmpH - thumbH;\n } else {\n return newPos;\n }\n }\n\n //#region event handlers\n private _handleSlotChange = () => {\n this._updateScrollbar();\n this._updateThumbPosition();\n this._zIndexFix();\n };\n\n private _handleScrollThumbMouseDown(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._handleScrollThumbMouseMove);\n document.addEventListener('mouseup', this._handleScrollThumbMouseUp);\n }\n\n private _handleScrollThumbMouseMove = (event: MouseEvent) => {\n const rawThumbPos =\n this._scrollThumbStartY + (event.screenY - this._mouseStartY);\n this._thumbY = this._limitThumbPos(rawThumbPos);\n this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);\n\n this.dispatchEvent(\n new CustomEvent('vsc-scrollable-scroll', {\n detail: this.scrollPos,\n })\n );\n };\n\n private _handleScrollThumbMouseUp = (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('mousemove', this._handleScrollThumbMouseMove);\n document.removeEventListener('mouseup', this._handleScrollThumbMouseUp);\n };\n\n private _handleComponentMouseOver = () => {\n this._thumbVisible = true;\n this._thumbFade = false;\n };\n\n private _handleComponentMouseOut = () => {\n if (!this._thumbActive) {\n this._thumbVisible = false;\n this._thumbFade = true;\n }\n };\n\n private _handleComponentWheel = (ev: WheelEvent) => {\n ev.preventDefault();\n\n const multiplier = ev.altKey\n ? this.mouseWheelScrollSensitivity * this.fastScrollSensitivity\n : this.mouseWheelScrollSensitivity;\n\n this.scrollPos = this._limitScrollPos(\n this.scrollPos + ev.deltaY * multiplier\n );\n this.dispatchEvent(\n new CustomEvent('vsc-scrollable-scroll', {\n detail: this.scrollPos,\n })\n );\n };\n\n private _handleScrollbarTrackPress(ev: PointerEvent) {\n if (ev.target !== ev.currentTarget) {\n return;\n }\n\n this._thumbY = ev.offsetY - this._thumbHeight / 2;\n this.scrollPos = this._calculateScrollPosFromThumbPos(this._thumbY);\n }\n\n private _handleScrollableContainerScroll = (ev: Event) => {\n if (ev.currentTarget) {\n this.scrollPos = (ev.currentTarget as HTMLDivElement).scrollTop;\n }\n };\n\n //#endregion\n\n override render(): TemplateResult {\n return html`\n <div\n class=\"scrollable-container\"\n .style=${stylePropertyMap({\n userSelect: this._isDragging ? 'none' : 'auto',\n })}\n .scrollTop=${this.scrollPos}\n @scroll=${this._handleScrollableContainerScroll}\n >\n <div\n class=${classMap({shadow: true, visible: this.scrolled})}\n .style=${stylePropertyMap({\n zIndex: String(this._scrollbarTrackZ),\n })}\n ></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 @mousedown=${this._handleScrollbarTrackPress}\n >\n <div\n class=${classMap({\n 'scrollbar-thumb': true,\n visible: this.alwaysVisible ? true : this._thumbVisible,\n fade: this.alwaysVisible ? false : this._thumbFade,\n active: this._thumbActive,\n })}\n .style=${stylePropertyMap({\n height: `${this._thumbHeight}px`,\n top: `${this._thumbY}px`,\n })}\n @mousedown=${this._handleScrollThumbMouseDown}\n ></div>\n </div>\n <div class=\"content\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-scrollable': VscodeScrollable;\n }\n\n interface GlobalEventHandlersEventMap {\n 'vsc-scrollable-scroll': VscScrollableScrollEvent;\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vscode-elements/elements",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Web components for creating Visual Studio Code extensions",
   "main": "dist/main.js",
   "module": "dist/main.js",
@@ -152,7 +152,7 @@
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@vscode-elements/webview-playground": "^1.6.0",
-    "@vscode/codicons": "^0.0.38",
+    "@vscode/codicons": "^0.0.39",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/dev-server-legacy": "^2.1.1",

package/vscode.css-custom-data.json CHANGED Viewed

@@ -115,6 +115,16 @@
     { "name": "--vscode-menu-selectionForeground", "values": [] },
     { "name": "--vscode-menu-separatorBackground", "values": [] },
     { "name": "--vscode-foreground", "values": [] },
+    {
+      "name": "--label-width",
+      "description": "The width of the label in horizontal mode",
+      "values": []
+    },
+    {
+      "name": "--label-right-margin",
+      "description": "The right margin of the label in horizontal mode",
+      "values": []
+    },
     {
       "name": "--vsc-foreground-translucent",
       "description": "Default text color. 90% transparency version of `--vscode-foreground` by default.",
@@ -135,21 +145,7 @@
     { "name": "--vscode-font-family", "values": [] },
     { "name": "--vscode-font-size", "values": [] },
     { "name": "--vscode-foreground", "values": [] },
-    {
-      "name": "--label-width",
-      "description": "The width of the label in horizontal mode",
-      "values": []
-    },
-    {
-      "name": "--label-right-margin",
-      "description": "The right margin of the label in horizontal mode",
-      "values": []
-    },
-    {
-      "name": "--dropdown-z-index",
-      "description": "workaround for dropdown z-index issues",
-      "values": []
-    },
+    { "name": "--dropdown-z-index", "values": [] },
     { "name": "--vscode-badge-background", "values": [] },
     { "name": "--vscode-badge-foreground", "values": [] },
     { "name": "--vscode-settings-dropdownBorder", "values": [] },
@@ -185,11 +181,7 @@
     { "name": "--vscode-scrollbarSlider-background", "values": [] },
     { "name": "--vscode-scrollbarSlider-hoverBackground", "values": [] },
     { "name": "--vscode-scrollbarSlider-activeBackground", "values": [] },
-    {
-      "name": "--dropdown-z-index",
-      "description": "workaround for dropdown z-index issues",
-      "values": []
-    },
+    { "name": "--dropdown-z-index", "values": [] },
     { "name": "--vscode-badge-background", "values": [] },
     { "name": "--vscode-badge-foreground", "values": [] },
     { "name": "--vscode-settings-dropdownBorder", "values": [] },

package/vscode.html-custom-data.json CHANGED Viewed

@@ -134,6 +134,11 @@
       "name": "vscode-collapsible",
       "description": "Allows users to reveal or hide related content on a page.\n---\n\n\n### **Events:**\n - **vsc-collapsible-toggle** - Dispatched when the content visibility is changed.\n\n### **Slots:**\n - _default_ - Main content.\n- **actions** - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.\n- **decorations** - The elements placed in the decorations slot are always visible.\n\n### **CSS Properties:**\n - **--vscode-sideBar-background** - Background color _(default: #181818)_\n- **--vscode-focusBorder** - Focus border color _(default: #0078d4)_\n- **--vscode-font-family** - Header font family _(default: sans-serif)_\n- **--vscode-sideBarSectionHeader-background** - Header background _(default: #181818)_\n- **--vscode-icon-foreground** - Arrow icon color _(default: #cccccc)_\n- **--vscode-sideBarTitle-foreground** - Header font color _(default: #cccccc)_\n\n### **CSS Parts:**\n - **body** - Container for the toggleable content of the component. The container's overflow content is hidden by default. This CSS part can serve as an escape hatch to modify this behavior.",
       "attributes": [
+        {
+          "name": "always-show-header-actions",
+          "description": "When enabled, header actions are always visible; otherwise, they appear only when the cursor\nhovers over the component. Actions are shown only when the Collapsible component is open. This\nproperty is designed to use the `workbench.view.alwaysShowHeaderActions` setting.",
+          "values": []
+        },
         {
           "name": "title",
           "description": "Component heading text",
@@ -194,6 +199,14 @@
       ],
       "references": []
     },
+    {
+      "name": "vscode-form-group",
+      "description": "\n---\n\n\n### **CSS Properties:**\n - **--label-width** - The width of the label in horizontal mode _(default: 150px)_\n- **--label-right-margin** - The right margin of the label in horizontal mode _(default: 14px)_",
+      "attributes": [
+        { "name": "variant", "values": [{ "name": "FormGroupVariant" }] }
+      ],
+      "references": []
+    },
     {
       "name": "vscode-form-helper",
       "description": "Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)\n---\n\n\n### **CSS Properties:**\n - **--vsc-foreground-translucent** - Default text color. 90% transparency version of `--vscode-foreground` by default. _(default: undefined)_",
@@ -243,17 +256,9 @@
       ],
       "references": []
     },
-    {
-      "name": "vscode-form-group",
-      "description": "\n---\n\n\n### **CSS Properties:**\n - **--label-width** - The width of the label in horizontal mode _(default: 150px)_\n- **--label-right-margin** - The right margin of the label in horizontal mode _(default: 14px)_",
-      "attributes": [
-        { "name": "variant", "values": [{ "name": "FormGroupVariant" }] }
-      ],
-      "references": []
-    },
     {
       "name": "vscode-multi-select",
-      "description": "Allows to select multiple items from a list of options.\n\nWhen participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\ncan be applied through the `invalid` property.\n---\n\n\n### **Events:**\n - **change**\n- **input**\n\n### **CSS Properties:**\n - **--dropdown-z-index** - workaround for dropdown z-index issues _(default: 2)_\n- **--vscode-badge-background** - undefined _(default: #616161)_\n- **--vscode-badge-foreground** - undefined _(default: #f8f8f8)_\n- **--vscode-settings-dropdownBorder** - undefined _(default: #3c3c3c)_\n- **--vscode-settings-checkboxBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownForeground** - undefined _(default: #cccccc)_\n- **--vscode-settings-dropdownListBorder** - undefined _(default: #454545)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_\n- **--vscode-foreground** - undefined _(default: #cccccc)_\n- **--vscode-font-family** - undefined _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-inputValidation-errorBackground** - undefined _(default: #5a1d1d)_\n- **--vscode-inputValidation-errorBorder** - undefined _(default: #be1100)_\n- **--vscode-list-activeSelectionBackground** - undefined _(default: #04395e)_\n- **--vscode-list-activeSelectionForeground** - undefined _(default: #ffffff)_\n- **--vscode-list-focusOutline** - undefined _(default: #0078d4)_\n- **--vscode-list-focusHighlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-highlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-hoverBackground** - undefined _(default: #2a2d2e)_\n- **--vscode-list-hoverForeground** - undefined _(default: #ffffff)_",
+      "description": "Allows to select multiple items from a list of options.\n\nWhen participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\ncan be applied through the `invalid` property.\n---\n\n\n### **Events:**\n - **change**\n- **input**\n\n### **CSS Properties:**\n - **--dropdown-z-index** - undefined _(default: 2)_\n- **--vscode-badge-background** - undefined _(default: #616161)_\n- **--vscode-badge-foreground** - undefined _(default: #f8f8f8)_\n- **--vscode-settings-dropdownBorder** - undefined _(default: #3c3c3c)_\n- **--vscode-settings-checkboxBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownForeground** - undefined _(default: #cccccc)_\n- **--vscode-settings-dropdownListBorder** - undefined _(default: #454545)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_\n- **--vscode-foreground** - undefined _(default: #cccccc)_\n- **--vscode-font-family** - undefined _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-inputValidation-errorBackground** - undefined _(default: #5a1d1d)_\n- **--vscode-inputValidation-errorBorder** - undefined _(default: #be1100)_\n- **--vscode-list-activeSelectionBackground** - undefined _(default: #04395e)_\n- **--vscode-list-activeSelectionForeground** - undefined _(default: #ffffff)_\n- **--vscode-list-focusOutline** - undefined _(default: #0078d4)_\n- **--vscode-list-focusHighlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-highlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-hoverBackground** - undefined _(default: #2a2d2e)_\n- **--vscode-list-hoverForeground** - undefined _(default: #ffffff)_",
       "attributes": [
         {
           "name": "invalid",
@@ -414,7 +419,7 @@
     },
     {
       "name": "vscode-single-select",
-      "description": "Allows to select an item from multiple options.\n\nWhen participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\ncan be applied through the `invalid` property.\n---\n\n\n### **Events:**\n - **change**\n- **input**\n\n### **CSS Properties:**\n - **--dropdown-z-index** - workaround for dropdown z-index issues _(default: 2)_\n- **--vscode-badge-background** - undefined _(default: #616161)_\n- **--vscode-badge-foreground** - undefined _(default: #f8f8f8)_\n- **--vscode-settings-dropdownBorder** - undefined _(default: #3c3c3c)_\n- **--vscode-settings-checkboxBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownForeground** - undefined _(default: #cccccc)_\n- **--vscode-settings-dropdownListBorder** - undefined _(default: #454545)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_\n- **--vscode-foreground** - undefined _(default: #cccccc)_\n- **--vscode-font-family** - undefined _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-inputValidation-errorBackground** - undefined _(default: #5a1d1d)_\n- **--vscode-inputValidation-errorBorder** - undefined _(default: #be1100)_\n- **--vscode-list-activeSelectionBackground** - undefined _(default: #04395e)_\n- **--vscode-list-activeSelectionForeground** - undefined _(default: #ffffff)_\n- **--vscode-list-focusOutline** - undefined _(default: #0078d4)_\n- **--vscode-list-focusHighlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-highlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-hoverBackground** - undefined _(default: #2a2d2e)_\n- **--vscode-list-hoverForeground** - undefined _(default: #ffffff)_",
+      "description": "Allows to select an item from multiple options.\n\nWhen participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\ncan be applied through the `invalid` property.\n---\n\n\n### **Events:**\n - **change**\n- **input**\n\n### **CSS Properties:**\n - **--dropdown-z-index** - undefined _(default: 2)_\n- **--vscode-badge-background** - undefined _(default: #616161)_\n- **--vscode-badge-foreground** - undefined _(default: #f8f8f8)_\n- **--vscode-settings-dropdownBorder** - undefined _(default: #3c3c3c)_\n- **--vscode-settings-checkboxBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownBackground** - undefined _(default: #313131)_\n- **--vscode-settings-dropdownForeground** - undefined _(default: #cccccc)_\n- **--vscode-settings-dropdownListBorder** - undefined _(default: #454545)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_\n- **--vscode-foreground** - undefined _(default: #cccccc)_\n- **--vscode-font-family** - undefined _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-inputValidation-errorBackground** - undefined _(default: #5a1d1d)_\n- **--vscode-inputValidation-errorBorder** - undefined _(default: #be1100)_\n- **--vscode-list-activeSelectionBackground** - undefined _(default: #04395e)_\n- **--vscode-list-activeSelectionForeground** - undefined _(default: #ffffff)_\n- **--vscode-list-focusOutline** - undefined _(default: #0078d4)_\n- **--vscode-list-focusHighlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-highlightForeground** - undefined _(default: #2aaaff)_\n- **--vscode-list-hoverBackground** - undefined _(default: #2a2d2e)_\n- **--vscode-list-hoverForeground** - undefined _(default: #ffffff)_",
       "attributes": [
         {
           "name": "invalid",