@vscode-elements/elements 2.0.0-pre.4 → 2.0.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 (77) hide show
  1. package/custom-elements.json +4428 -4374
  2. package/dist/bundled.js +92 -57
  3. package/dist/includes/VscElement.js +1 -1
  4. package/dist/includes/VscElement.js.map +1 -1
  5. package/dist/includes/vscode-select/styles.d.ts.map +1 -1
  6. package/dist/includes/vscode-select/styles.js +4 -3
  7. package/dist/includes/vscode-select/styles.js.map +1 -1
  8. package/dist/vscode-collapsible/vscode-collapsible.d.ts +11 -2
  9. package/dist/vscode-collapsible/vscode-collapsible.d.ts.map +1 -1
  10. package/dist/vscode-collapsible/vscode-collapsible.js +16 -4
  11. package/dist/vscode-collapsible/vscode-collapsible.js.map +1 -1
  12. package/dist/vscode-scrollable/vscode-scrollable.d.ts.map +1 -1
  13. package/dist/vscode-scrollable/vscode-scrollable.js +7 -8
  14. package/dist/vscode-scrollable/vscode-scrollable.js.map +1 -1
  15. package/dist/vscode-tab-header/vscode-tab-header.d.ts +5 -6
  16. package/dist/vscode-tab-header/vscode-tab-header.d.ts.map +1 -1
  17. package/dist/vscode-tab-header/vscode-tab-header.js +5 -6
  18. package/dist/vscode-tab-header/vscode-tab-header.js.map +1 -1
  19. package/dist/vscode-tab-header/vscode-tab-header.styles.js +8 -8
  20. package/dist/vscode-tab-header/vscode-tab-header.styles.js.map +1 -1
  21. package/dist/vscode-tab-panel/vscode-tab-panel.d.ts +2 -2
  22. package/dist/vscode-tab-panel/vscode-tab-panel.js +2 -2
  23. package/dist/vscode-tab-panel/vscode-tab-panel.js.map +1 -1
  24. package/dist/vscode-tab-panel/vscode-tab-panel.styles.js +2 -2
  25. package/dist/vscode-tab-panel/vscode-tab-panel.styles.js.map +1 -1
  26. package/dist/vscode-table/vscode-table.d.ts +3 -7
  27. package/dist/vscode-table/vscode-table.d.ts.map +1 -1
  28. package/dist/vscode-table/vscode-table.js +3 -7
  29. package/dist/vscode-table/vscode-table.js.map +1 -1
  30. package/dist/vscode-table/vscode-table.styles.d.ts.map +1 -1
  31. package/dist/vscode-table/vscode-table.styles.js +17 -5
  32. package/dist/vscode-table/vscode-table.styles.js.map +1 -1
  33. package/dist/vscode-table-body/vscode-table-body.d.ts +0 -2
  34. package/dist/vscode-table-body/vscode-table-body.d.ts.map +1 -1
  35. package/dist/vscode-table-body/vscode-table-body.js +0 -2
  36. package/dist/vscode-table-body/vscode-table-body.js.map +1 -1
  37. package/dist/vscode-table-cell/vscode-table-cell.d.ts +4 -4
  38. package/dist/vscode-table-cell/vscode-table-cell.js +4 -4
  39. package/dist/vscode-table-cell/vscode-table-cell.js.map +1 -1
  40. package/dist/vscode-table-cell/vscode-table-cell.styles.d.ts.map +1 -1
  41. package/dist/vscode-table-cell/vscode-table-cell.styles.js +7 -4
  42. package/dist/vscode-table-cell/vscode-table-cell.styles.js.map +1 -1
  43. package/dist/vscode-table-header/vscode-table-header.d.ts +1 -1
  44. package/dist/vscode-table-header/vscode-table-header.js +1 -1
  45. package/dist/vscode-table-header/vscode-table-header.js.map +1 -1
  46. package/dist/vscode-table-header/vscode-table-header.styles.d.ts.map +1 -1
  47. package/dist/vscode-table-header/vscode-table-header.styles.js +4 -1
  48. package/dist/vscode-table-header/vscode-table-header.styles.js.map +1 -1
  49. package/dist/vscode-table-header-cell/vscode-table-header-cell.d.ts +3 -3
  50. package/dist/vscode-table-header-cell/vscode-table-header-cell.js +3 -3
  51. package/dist/vscode-table-header-cell/vscode-table-header-cell.js.map +1 -1
  52. package/dist/vscode-table-header-cell/vscode-table-header-cell.styles.js +3 -3
  53. package/dist/vscode-table-header-cell/vscode-table-header-cell.styles.js.map +1 -1
  54. package/dist/vscode-table-row/vscode-table-row.d.ts +1 -1
  55. package/dist/vscode-table-row/vscode-table-row.js +1 -1
  56. package/dist/vscode-table-row/vscode-table-row.js.map +1 -1
  57. package/dist/vscode-table-row/vscode-table-row.styles.d.ts.map +1 -1
  58. package/dist/vscode-table-row/vscode-table-row.styles.js +4 -1
  59. package/dist/vscode-table-row/vscode-table-row.styles.js.map +1 -1
  60. package/dist/vscode-tabs/vscode-tabs.d.ts +5 -5
  61. package/dist/vscode-tabs/vscode-tabs.js +5 -5
  62. package/dist/vscode-tabs/vscode-tabs.js.map +1 -1
  63. package/dist/vscode-tabs/vscode-tabs.styles.js +5 -5
  64. package/dist/vscode-tabs/vscode-tabs.styles.js.map +1 -1
  65. package/dist/vscode-tree/vscode-tree.d.ts +12 -0
  66. package/dist/vscode-tree/vscode-tree.d.ts.map +1 -1
  67. package/dist/vscode-tree/vscode-tree.js +12 -0
  68. package/dist/vscode-tree/vscode-tree.js.map +1 -1
  69. package/dist/vscode-tree/vscode-tree.styles.d.ts.map +1 -1
  70. package/dist/vscode-tree/vscode-tree.styles.js +13 -6
  71. package/dist/vscode-tree/vscode-tree.styles.js.map +1 -1
  72. package/dist/vscode-tree-item/vscode-tree-item.styles.d.ts.map +1 -1
  73. package/dist/vscode-tree-item/vscode-tree-item.styles.js +16 -9
  74. package/dist/vscode-tree-item/vscode-tree-item.styles.js.map +1 -1
  75. package/package.json +1 -1
  76. package/vscode.css-custom-data.json +38 -33
  77. package/vscode.html-custom-data.json +86 -90
package/dist/includes/vscode-select/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqYF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-radius: 2px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background, #616161);\n border-radius: 2px;\n color: var(--vscode-badge-foreground, #f8f8f8);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n border-color: var(--vscode-focusBorder, #0078d4);\n outline: none;\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n align-items: center;\n background-color: transparent;\n border: 0;\n border-radius: 2px;\n box-sizing: content-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n height: 16px;\n justify-content: center;\n margin: 1px 1px 0 0;\n padding: 3px;\n width: 22px;\n }\n\n .combobox-button:hover,\n .combobox-button:focus-visible {\n background-color: var(\n --vscode-toolbar-hoverBackground,\n rgba(90, 93, 94, 0.31)\n );\n outline-style: dashed;\n outline-color: var(--vscode-toolbar-hoverOutline, transparent);\n }\n\n .combobox-button:focus-visible {\n outline: none;\n }\n\n .icon {\n color: var(--vscode-foreground, #cccccc);\n display: block;\n height: 14px;\n pointer-events: none;\n width: 14px;\n }\n\n .select-face .icon {\n position: absolute;\n right: 6px;\n top: 5px;\n }\n\n .icon svg {\n color: var(--vscode-foreground, #cccccc);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownListBorder, #454545);\n border-radius: 0 0 3px 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n display: none;\n left: 0;\n padding-bottom: 2px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: var(--dropdown-z-index, 2);\n }\n\n .dropdown.open {\n display: block;\n }\n\n :host([position='above']) .dropdown {\n border-radius: 3px 3px 0 0;\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: auto;\n }\n\n :host(:focus) .dropdown,\n :host([focused]) .dropdown {\n border-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .scrollable {\n display: block;\n max-height: 222px;\n margin: 1px;\n outline: none;\n overflow: hidden;\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .option {\n align-items: center;\n box-sizing: border-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n height: 22px;\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n outline-color: transparent;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: 1px;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground, #2aaaff);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground, #2aaaff);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n color: var(--vscode-list-hoverForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n outline-style: dotted;\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-width: 1px;\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n outline-style: solid;\n outline-width: 1px;\n }\n\n .no-options {\n align-items: center;\n border-color: transparent;\n border-style: solid;\n border-width: 1px;\n color: var(--vscode-foreground, #cccccc);\n cursor: default;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n opacity: 0.85;\n padding: 1px 3px;\n user-select: none;\n }\n\n .placeholder {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .placeholder span {\n font-weight: bold;\n }\n\n .placeholder:not(.disabled):hover {\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-style: dashed;\n }\n\n .option-label {\n display: block;\n pointer-events: none;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n outline-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n }\n\n .checkbox-icon {\n align-items: center;\n background-color: var(--vscode-checkbox-background, #313131);\n border: 1px solid var(--vscode-checkbox-border);\n border-radius: 2px;\n box-sizing: border-box;\n color: var(--vscode-checkbox-foreground);\n display: inline-flex;\n height: 15px;\n justify-content: center;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 15px;\n }\n\n .checkbox-icon svg {\n display: none;\n height: 13px;\n width: 13px;\n }\n\n .checkbox-icon.checked svg {\n display: block;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/includes/vscode-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,aAAa,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsYF;CACF,CAAC","sourcesContent":["import {css} from 'lit';\nimport defaultStyles from '../default.styles.js';\n\nexport default [\n defaultStyles,\n css`\n :host {\n display: inline-block;\n max-width: 100%;\n outline: none;\n position: relative;\n width: 320px;\n }\n\n .main-slot {\n display: none;\n }\n\n .select-face,\n .combobox-face {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-radius: 2px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n color: var(--vscode-settings-dropdownForeground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n position: relative;\n user-select: none;\n width: 100%;\n }\n\n :host([invalid]) .select-face,\n :host(:invalid) .select-face,\n :host([invalid]) .combobox-face,\n :host(:invalid) .combobox-face {\n background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n }\n\n .select-face {\n cursor: pointer;\n display: block;\n padding: 3px 4px;\n }\n\n .select-face .text {\n display: block;\n height: 18px;\n overflow: hidden;\n }\n\n .select-face.multiselect {\n padding: 0;\n }\n\n .select-face-badge {\n background-color: var(--vscode-badge-background, #616161);\n border-radius: 2px;\n color: var(--vscode-badge-foreground, #f8f8f8);\n display: inline-block;\n flex-shrink: 0;\n font-size: 11px;\n line-height: 16px;\n margin: 2px;\n padding: 2px 3px;\n white-space: nowrap;\n }\n\n .select-face-badge.no-item {\n background-color: transparent;\n color: inherit;\n }\n\n .combobox-face {\n display: flex;\n }\n\n :host(:focus) .select-face,\n :host(:focus) .combobox-face,\n :host([focused]) .select-face,\n :host([focused]) .combobox-face {\n border-color: var(--vscode-focusBorder, #0078d4);\n outline: none;\n }\n\n .combobox-input {\n background-color: transparent;\n box-sizing: border-box;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n display: block;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n line-height: 16px;\n padding: 4px;\n width: 100%;\n }\n\n .combobox-input:focus {\n outline: none;\n }\n\n .combobox-button {\n align-items: center;\n background-color: transparent;\n border: 0;\n border-radius: 2px;\n box-sizing: content-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n flex-shrink: 0;\n height: 16px;\n justify-content: center;\n margin: 1px 1px 0 0;\n padding: 3px;\n width: 22px;\n }\n\n .combobox-button:hover,\n .combobox-button:focus-visible {\n background-color: var(\n --vscode-toolbar-hoverBackground,\n rgba(90, 93, 94, 0.31)\n );\n outline-style: dashed;\n outline-color: var(--vscode-toolbar-hoverOutline, transparent);\n }\n\n .combobox-button:focus-visible {\n outline: none;\n }\n\n .icon {\n color: var(--vscode-foreground, #cccccc);\n display: block;\n height: 14px;\n pointer-events: none;\n width: 14px;\n }\n\n .select-face .icon {\n position: absolute;\n right: 6px;\n top: 5px;\n }\n\n .icon svg {\n color: var(--vscode-foreground, #cccccc);\n height: 100%;\n width: 100%;\n }\n\n .dropdown {\n background-color: var(--vscode-settings-dropdownBackground, #313131);\n border-color: var(--vscode-settings-dropdownListBorder, #454545);\n border-radius: 0 0 3px 3px;\n border-style: solid;\n border-width: 1px;\n box-sizing: border-box;\n display: none;\n left: 0;\n padding-bottom: 2px;\n position: absolute;\n top: 100%;\n width: 100%;\n z-index: var(--dropdown-z-index, 2);\n }\n\n .dropdown.open {\n display: block;\n }\n\n :host([position='above']) .dropdown {\n border-radius: 3px 3px 0 0;\n bottom: 26px;\n padding-bottom: 0;\n padding-top: 2px;\n top: auto;\n }\n\n :host(:focus) .dropdown,\n :host([focused]) .dropdown {\n border-color: var(--vscode-focusBorder, #0078d4);\n }\n\n .scrollable {\n display: block;\n max-height: 222px;\n margin: 1px;\n outline: none;\n overflow: hidden;\n }\n\n .options {\n box-sizing: border-box;\n cursor: pointer;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .option {\n box-sizing: border-box;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n height: 22px;\n line-height: 20px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n padding: 1px 3px;\n user-select: none;\n outline-color: transparent;\n outline-offset: -1px;\n outline-style: solid;\n outline-width: 1px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .option b {\n color: var(--vscode-list-highlightForeground, #2aaaff);\n }\n\n .option.active b {\n color: var(--vscode-list-focusHighlightForeground, #2aaaff);\n }\n\n .option:not(.disabled):hover {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n color: var(--vscode-list-hoverForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option:hover,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option:hover {\n outline-style: dotted;\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-width: 1px;\n }\n\n .option.disabled {\n cursor: not-allowed;\n opacity: 0.4;\n }\n\n .option.active,\n .option.active:hover {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n outline-style: solid;\n outline-width: 1px;\n }\n\n .no-options {\n align-items: center;\n border-color: transparent;\n border-style: solid;\n border-width: 1px;\n color: var(--vscode-foreground, #cccccc);\n cursor: default;\n display: flex;\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 18px;\n min-height: calc(var(--vscode-font-size) * 1.3);\n opacity: 0.85;\n padding: 1px 3px;\n user-select: none;\n }\n\n .placeholder {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .placeholder span {\n font-weight: bold;\n }\n\n .placeholder:not(.disabled):hover {\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n }\n\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast'])\n .option.active,\n :host-context(body[data-vscode-theme-kind='vscode-high-contrast-light'])\n .option.active:hover {\n outline-color: var(--vscode-list-focusOutline, #0078d4);\n outline-style: dashed;\n }\n\n .option-label {\n display: block;\n pointer-events: none;\n width: 100%;\n }\n\n .dropdown.multiple .option.selected {\n background-color: var(--vscode-list-hoverBackground, #2a2d2e);\n outline-color: var(--vscode-list-hoverBackground, #2a2d2e);\n }\n\n .dropdown.multiple .option.selected.active {\n background-color: var(--vscode-list-activeSelectionBackground, #04395e);\n color: var(--vscode-list-activeSelectionForeground, #ffffff);\n outline-color: var(--vscode-list-activeSelectionBackground, #04395e);\n }\n\n .checkbox-icon {\n align-items: center;\n background-color: var(--vscode-checkbox-background, #313131);\n border: 1px solid var(--vscode-checkbox-border);\n border-radius: 2px;\n box-sizing: border-box;\n color: var(--vscode-checkbox-foreground);\n display: inline-flex;\n height: 15px;\n justify-content: center;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n width: 15px;\n }\n\n .checkbox-icon svg {\n display: none;\n height: 13px;\n width: 13px;\n }\n\n .checkbox-icon.checked svg {\n display: block;\n }\n\n .dropdown-controls {\n display: flex;\n justify-content: flex-end;\n padding: 4px;\n }\n\n .dropdown-controls :not(:last-child) {\n margin-right: 4px;\n }\n\n .action-icon {\n align-items: center;\n background-color: transparent;\n border: 0;\n color: var(--vscode-foreground, #cccccc);\n cursor: pointer;\n display: flex;\n height: 24px;\n justify-content: center;\n padding: 0;\n width: 24px;\n }\n\n .action-icon:focus {\n outline: none;\n }\n\n .action-icon:focus-visible {\n outline: 1px solid var(--vscode-focusBorder, #0078d4);\n outline-offset: -1px;\n }\n\n .description {\n border-color: var(--vscode-settings-dropdownBorder, #3c3c3c);\n border-style: solid;\n border-width: 1px 0 0;\n color: var(--vscode-foreground, #cccccc);\n font-family: var(--vscode-font-family, sans-serif);\n font-size: var(--vscode-font-size, 13px);\n font-weight: var(--vscode-font-weight, normal);\n line-height: 1.3;\n padding: 6px 4px;\n word-wrap: break-word;\n }\n\n :host([position='above']) .description {\n border-width: 0 0 1px;\n }\n `,\n];\n"]}
package/dist/vscode-collapsible/vscode-collapsible.d.ts CHANGED
@@ -25,9 +25,18 @@ export type VscCollapsibleToggleEvent = CustomEvent<{
25
25
  */
26
26
  export declare class VscodeCollapsible extends VscElement {
27
27
  static styles: import("lit").CSSResultGroup;
28
- /** Component heading text */
28
+ /**
29
+ * Component heading text
30
+ *
31
+ * @deprecated The `title` is a global HTML attribute and will unintentionally trigger a native
32
+ * tooltip on the component. Use the `heading` property instead.
33
+ */
29
34
  title: string;
30
- /** Less prominent text than the title in the header */
35
+ /**
36
+ * Heading text.
37
+ */
38
+ heading: string;
39
+ /** Less prominent text in the header. */
31
40
  description: string;
32
41
  open: boolean;
33
42
  private _emitToggleEvent;
package/dist/vscode-collapsible/vscode-collapsible.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-collapsible.d.ts","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,+BAAU;IAEhC,6BAA6B;IAEpB,KAAK,SAAM;IAEpB,uDAAuD;IAEvD,WAAW,SAAM;IAGjB,IAAI,UAAS;IAEb,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAOf,MAAM,IAAI,cAAc;CA4ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;IAED,UAAU,2BAA2B;QACnC,wBAAwB,EAAE,yBAAyB,CAAC;KACrD;CACF"}
1
+ {"version":3,"file":"vscode-collapsible.d.ts","sourceRoot":"","sources":["../../src/vscode-collapsible/vscode-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAC,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,+BAAU;IAEhC;;;;;OAKG;IAEM,KAAK,EAAE,MAAM,CAAM;IAE5B;;OAEG;IAEH,OAAO,SAAM;IAEb,yCAAyC;IAEzC,WAAW,SAAM;IAGjB,IAAI,UAAS;IAEb,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,gBAAgB;IAOf,MAAM,IAAI,cAAc;CA4ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;IAED,UAAU,2BAA2B;QACnC,wBAAwB,EAAE,yBAAyB,CAAC;KACrD;CACF"}
package/dist/vscode-collapsible/vscode-collapsible.js CHANGED
@@ -32,9 +32,18 @@ import styles from './vscode-collapsible.styles.js';
32
32
  let VscodeCollapsible = class VscodeCollapsible extends VscElement {
33
33
  constructor() {
34
34
  super(...arguments);
35
- /** Component heading text */
35
+ /**
36
+ * Component heading text
37
+ *
38
+ * @deprecated The `title` is a global HTML attribute and will unintentionally trigger a native
39
+ * tooltip on the component. Use the `heading` property instead.
40
+ */
36
41
  this.title = '';
37
- /** Less prominent text than the title in the header */
42
+ /**
43
+ * Heading text.
44
+ */
45
+ this.heading = '';
46
+ /** Less prominent text in the header. */
38
47
  this.description = '';
39
48
  this.open = false;
40
49
  }
@@ -55,6 +64,7 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
55
64
  }
56
65
  render() {
57
66
  const classes = classMap({ collapsible: true, open: this.open });
67
+ const heading = this.heading ? this.heading : this.title;
58
68
  const icon = html `<svg
59
69
  width="16"
60
70
  height="16"
@@ -77,12 +87,11 @@ let VscodeCollapsible = class VscodeCollapsible extends VscElement {
77
87
  <div
78
88
  class="collapsible-header"
79
89
  tabindex="0"
80
- title=${this.title}
81
90
  @click=${this._onHeaderClick}
82
91
  @keydown=${this._onHeaderKeyDown}
83
92
  >
84
93
  ${icon}
85
- <h3 class="title">${this.title}${descriptionMarkup}</h3>
94
+ <h3 class="title">${heading}${descriptionMarkup}</h3>
86
95
  <div class="header-slots">
87
96
  <div class="actions"><slot name="actions"></slot></div>
88
97
  <div class="decorations"><slot name="decorations"></slot></div>
@@ -99,6 +108,9 @@ VscodeCollapsible.styles = styles;
99
108
  __decorate([
100
109
  property({ type: String })
101
110
  ], VscodeCollapsible.prototype, "title", void 0);
111
+ __decorate([
112
+ property()
113
+ ], VscodeCollapsible.prototype, "heading", void 0);
102
114
  __decorate([
103
115
  property()
104
116
  ], VscodeCollapsible.prototype, "description", void 0);
package/dist/vscode-collapsible/vscode-collapsible.js.map CHANGED
@@ -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,6BAA6B;QAEpB,UAAK,GAAG,EAAE,CAAC;QAEpB,uDAAuD;QAEvD,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;QAE/D,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;;;;kBAIR,IAAI,CAAC,KAAK;mBACT,IAAI,CAAC,cAAc;qBACjB,IAAI,CAAC,gBAAgB;;YAE9B,IAAI;8BACc,IAAI,CAAC,KAAK,GAAG,iBAAiB;;;;;;;;;;KAUvD,CAAC;IACJ,CAAC;;AA5Ee,wBAAM,GAAG,MAAM,AAAT,CAAU;AAIvB;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;gDACL;AAIpB;IADC,QAAQ,EAAE;sDACM;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC5B;AAZF,iBAAiB;IAD7B,aAAa,CAAC,oBAAoB,CAAC;GACvB,iBAAiB,CA8E7B","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 /** Component heading text */\n @property({type: String})\n override title = '';\n\n /** Less prominent text than the title 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\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 title=${this.title}\n @click=${this._onHeaderClick}\n @keydown=${this._onHeaderKeyDown}\n >\n ${icon}\n <h3 class=\"title\">${this.title}${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;;;;;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"]}
package/dist/vscode-scrollable/vscode-scrollable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"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;AAGlE,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAIpE,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAE3D;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,+BAAU;IAEhC;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;;OAIG;IAEH,qBAAqB,SAAK;IAE1B;;OAEG;IAEH,YAAY,SAAM;IAElB;;;;;OAKG;IAEH,2BAA2B,SAAK;IAEhC;;OAEG;IAEH,MAAM,UAAQ;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IACH,IACI,SAAS,CAAC,GAAG,EAAE,MAAM,EAKxB;IACD,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,OAAO,CAAC,UAAU,CAAK;IAEvB;;OAEG;IACH,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;;IASpB,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cASlB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAIzE,OAAO,CAAC,uBAAuB,CAG7B;IAEF,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,+BAA+B;IASvC,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,2BAA2B;IAanC,OAAO,CAAC,2BAA2B,CAWjC;IAEF,OAAO,CAAC,yBAAyB,CAe/B;IAEF,OAAO,CAAC,yBAAyB,CAG/B;IAEF,OAAO,CAAC,wBAAwB,CAK9B;IAEF,OAAO,CAAC,qBAAqB,CAe3B;IAEF,OAAO,CAAC,0BAA0B;IASlC,OAAO,CAAC,gCAAgC,CAItC;IAIO,MAAM,IAAI,cAAc;CA8ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;IAED,UAAU,2BAA2B;QACnC,uBAAuB,EAAE,wBAAwB,CAAC;KACnD;CACF"}
1
+ {"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;AAGlE,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAIpE,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAE3D;;;;;;;GAOG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,+BAAU;IAEhC;;;OAGG;IAEH,aAAa,UAAS;IAEtB;;;;OAIG;IAEH,qBAAqB,SAAK;IAE1B;;OAEG;IAEH,YAAY,SAAM;IAElB;;;;;OAKG;IAEH,2BAA2B,SAAK;IAEhC;;OAEG;IAEH,MAAM,UAAQ;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IACH,IACI,SAAS,CAAC,GAAG,EAAE,MAAM,EAKxB;IACD,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,OAAO,CAAC,UAAU,CAAK;IAEvB;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAStB;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;;IAWpB,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;cASlB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAMzE,OAAO,CAAC,uBAAuB,CAG7B;IAEF,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,UAAU;IAqBlB,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,+BAA+B;IASvC,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,iBAAiB,CAIvB;IAEF,OAAO,CAAC,2BAA2B;IAanC,OAAO,CAAC,2BAA2B,CAWjC;IAEF,OAAO,CAAC,yBAAyB,CAe/B;IAEF,OAAO,CAAC,yBAAyB,CAG/B;IAEF,OAAO,CAAC,wBAAwB,CAK9B;IAEF,OAAO,CAAC,qBAAqB,CAe3B;IAEF,OAAO,CAAC,0BAA0B;IASlC,OAAO,CAAC,gCAAgC,CAItC;IAIO,MAAM,IAAI,cAAc;CA8ClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;IAED,UAAU,2BAA2B;QACnC,uBAAuB,EAAE,wBAAwB,CAAC;KACnD;CACF"}
package/dist/vscode-scrollable/vscode-scrollable.js CHANGED
@@ -38,8 +38,10 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
38
38
  if (!this._scrollableContainer) {
39
39
  return 0;
40
40
  }
41
- return this._scrollableContainer.scrollHeight;
41
+ return (this._scrollableContainer.scrollHeight -
42
+ this._scrollableContainer.clientHeight);
42
43
  }
44
+ //#region lifecycle methods
43
45
  constructor() {
44
46
  super();
45
47
  /**
@@ -83,6 +85,7 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
83
85
  this._mouseStartY = 0;
84
86
  this._scrollbarVisible = true;
85
87
  this._scrollbarTrackZ = 0;
88
+ //#endregion
86
89
  this._resizeObserverCallback = () => {
87
90
  this._updateScrollbar();
88
91
  this._updateThumbPosition();
@@ -203,13 +206,12 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
203
206
  if (!this._scrollableContainer) {
204
207
  return;
205
208
  }
206
- const scrollTop = this._scrollPos;
207
- this.scrolled = scrollTop > 0;
209
+ this.scrolled = this.scrollPos > 0;
208
210
  const componentH = this.offsetHeight;
209
211
  const thumbH = this._thumbHeight;
210
212
  const contentH = this._contentElement.offsetHeight;
211
213
  const overflown = contentH - componentH;
212
- const ratio = scrollTop / overflown;
214
+ const ratio = this.scrollPos / overflown;
213
215
  const thumbYMax = componentH - thumbH;
214
216
  this._thumbY = Math.min(ratio * (componentH - thumbH), thumbYMax);
215
217
  }
@@ -269,7 +271,7 @@ let VscodeScrollable = class VscodeScrollable extends VscElement {
269
271
  .style=${stylePropertyMap({
270
272
  userSelect: this._isDragging ? 'none' : 'auto',
271
273
  })}
272
- .scrollTop=${this._scrollPos}
274
+ .scrollTop=${this.scrollPos}
273
275
  @scroll=${this._handleScrollableContainerScroll}
274
276
  >
275
277
  <div
@@ -331,9 +333,6 @@ __decorate([
331
333
  __decorate([
332
334
  property({ type: Number, attribute: 'scroll-pos' })
333
335
  ], VscodeScrollable.prototype, "scrollPos", null);
334
- __decorate([
335
- property({ type: Number, attribute: 'scroll-max' })
336
- ], VscodeScrollable.prototype, "scrollMax", null);
337
336
  __decorate([
338
337
  state()
339
338
  ], VscodeScrollable.prototype, "_isDragging", void 0);
package/dist/vscode-scrollable/vscode-scrollable.js.map CHANGED
@@ -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 @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', 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 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 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 const scrollTop = this._scrollPos;\n this.scrolled = scrollTop > 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 = scrollTop / 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 = 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/dist/vscode-tab-header/vscode-tab-header.d.ts CHANGED
@@ -3,12 +3,11 @@ import { VscElement } from '../includes/VscElement.js';
3
3
  /**
4
4
  * @tag vscode-tab-header
5
5
  *
6
- * @cssprop --vscode-foreground
7
- * @cssprop --vscode-panelTitle-inactiveForeground
8
- * @cssprop --vscode-panelTitle-activeForeground
9
- * @cssprop --vscode-panelTitle-activeBorder
10
- * @cssprop --vscode-focusBorder
11
- * @cssprop --vscode-settings-headerForeground
6
+ * @cssprop [--vscode-focusBorder=#0078d4]
7
+ * @cssprop [--vscode-foreground=#cccccc]
8
+ * @cssprop [--vscode-panelTitle-activeBorder=#0078d4]
9
+ * @cssprop [--vscode-panelTitle-activeForeground=#cccccc]
10
+ * @cssprop [--vscode-panelTitle-inactiveForeground=#9d9d9d]
12
11
  */
13
12
  export declare class VscodeTabHeader extends VscElement {
14
13
  static styles: import("lit").CSSResultGroup;
package/dist/vscode-tab-header/vscode-tab-header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-tab-header.d.ts","sourceRoot":"","sources":["../../src/vscode-tab-header/vscode-tab-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAU;IAGhC,MAAM,UAAS;IAEf,gBAAgB;IAEhB,YAAY,SAAM;IAElB;;OAEG;IAEH,KAAK,UAAS;IAEd,gBAAgB;IAEP,IAAI,SAAS;IAEtB,gBAAgB;IAEhB,KAAK,SAAM;IAEF,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAUE,MAAM,IAAI,cAAc;CAsBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
1
+ {"version":3,"file":"vscode-tab-header.d.ts","sourceRoot":"","sources":["../../src/vscode-tab-header/vscode-tab-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzC,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAGpE;;;;;;;;GAQG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,+BAAU;IAGhC,MAAM,UAAS;IAEf,gBAAgB;IAEhB,YAAY,SAAM;IAElB;;OAEG;IAEH,KAAK,UAAS;IAEd,gBAAgB;IAEP,IAAI,SAAS;IAEtB,gBAAgB;IAEhB,KAAK,SAAM;IAEF,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,GAAG,IAAI,EAClB,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,IAAI;IAUE,MAAM,IAAI,cAAc;CAsBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
package/dist/vscode-tab-header/vscode-tab-header.js CHANGED
@@ -12,12 +12,11 @@ import styles from './vscode-tab-header.styles.js';
12
12
  /**
13
13
  * @tag vscode-tab-header
14
14
  *
15
- * @cssprop --vscode-foreground
16
- * @cssprop --vscode-panelTitle-inactiveForeground
17
- * @cssprop --vscode-panelTitle-activeForeground
18
- * @cssprop --vscode-panelTitle-activeBorder
19
- * @cssprop --vscode-focusBorder
20
- * @cssprop --vscode-settings-headerForeground
15
+ * @cssprop [--vscode-focusBorder=#0078d4]
16
+ * @cssprop [--vscode-foreground=#cccccc]
17
+ * @cssprop [--vscode-panelTitle-activeBorder=#0078d4]
18
+ * @cssprop [--vscode-panelTitle-activeForeground=#cccccc]
19
+ * @cssprop [--vscode-panelTitle-inactiveForeground=#9d9d9d]
21
20
  */
22
21
  let VscodeTabHeader = class VscodeTabHeader extends VscElement {
23
22
  constructor() {
package/dist/vscode-tab-header/vscode-tab-header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-tab-header.js","sourceRoot":"","sources":["../../src/vscode-tab-header/vscode-tab-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,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,+BAA+B,CAAC;AAEnD;;;;;;;;;GASG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIL,WAAM,GAAG,KAAK,CAAC;QAEf,gBAAgB;QAEhB,iBAAY,GAAG,EAAE,CAAC;QAElB;;WAEG;QAEH,UAAK,GAAG,KAAK,CAAC;QAEd,gBAAgB;QAEP,SAAI,GAAG,KAAK,CAAC;QAEtB,gBAAgB;QAEhB,UAAK,GAAG,CAAC,CAAC,CAAC;IAsCb,CAAC;IApCU,wBAAwB,CAC/B,IAAY,EACZ,GAAkB,EAClB,KAAoB;QAEpB,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAEjD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAC9C,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;;;;;;kBAMQ,QAAQ,CAAC;YACf,kBAAkB,EAAE,IAAI;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;;;KAGP,CAAC;IACJ,CAAC;;AA1De,sBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC1B;AAIf;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAC,CAAC;qDACpC;AAMlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAC3B;AAIL;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;6CACJ;AAItB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;8CAClD;AAtBA,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA4D3B","sourcesContent":["import {html, 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-tab-header.styles.js';\n\n/**\n * @tag vscode-tab-header\n *\n * @cssprop --vscode-foreground\n * @cssprop --vscode-panelTitle-inactiveForeground\n * @cssprop --vscode-panelTitle-activeForeground\n * @cssprop --vscode-panelTitle-activeBorder\n * @cssprop --vscode-focusBorder\n * @cssprop --vscode-settings-headerForeground\n */\n@customElement('vscode-tab-header')\nexport class VscodeTabHeader extends VscElement {\n static override styles = styles;\n\n @property({type: Boolean, reflect: true})\n active = false;\n\n /** @internal */\n @property({reflect: true, attribute: 'aria-controls'})\n ariaControls = '';\n\n /**\n * Panel-like look\n */\n @property({type: Boolean, reflect: true})\n panel = false;\n\n /** @internal */\n @property({reflect: true})\n override role = 'tab';\n\n /** @internal */\n @property({type: Number, reflect: true, attribute: 'tab-id'})\n tabId = -1;\n\n override attributeChangedCallback(\n name: string,\n old: string | null,\n value: string | null\n ): void {\n super.attributeChangedCallback(name, old, value);\n\n if (name === 'active') {\n const active = value !== null;\n this.ariaSelected = active ? 'true' : 'false';\n this.tabIndex = active ? 0 : -1;\n }\n }\n\n override render(): TemplateResult {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n active: this.active,\n panel: this.panel,\n })}\n >\n <div class=\"before\"><slot name=\"content-before\"></slot></div>\n <div class=\"main\"><slot></slot></div>\n <div class=\"after\"><slot name=\"content-after\"></slot></div>\n <span\n class=${classMap({\n 'active-indicator': true,\n active: this.active,\n panel: this.panel,\n })}\n ></span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-tab-header': VscodeTabHeader;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-tab-header.js","sourceRoot":"","sources":["../../src/vscode-tab-header/vscode-tab-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,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,+BAA+B,CAAC;AAEnD;;;;;;;;GAQG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIL,WAAM,GAAG,KAAK,CAAC;QAEf,gBAAgB;QAEhB,iBAAY,GAAG,EAAE,CAAC;QAElB;;WAEG;QAEH,UAAK,GAAG,KAAK,CAAC;QAEd,gBAAgB;QAEP,SAAI,GAAG,KAAK,CAAC;QAEtB,gBAAgB;QAEhB,UAAK,GAAG,CAAC,CAAC,CAAC;IAsCb,CAAC;IApCU,wBAAwB,CAC/B,IAAY,EACZ,GAAkB,EAClB,KAAoB;QAEpB,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;QAEjD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAC9C,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;;;;;;kBAMQ,QAAQ,CAAC;YACf,kBAAkB,EAAE,IAAI;YACxB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC;;;KAGP,CAAC;IACJ,CAAC;;AA1De,sBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC1B;AAIf;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAC,CAAC;qDACpC;AAMlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAC3B;AAIL;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;6CACJ;AAItB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAC,CAAC;8CAClD;AAtBA,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA4D3B","sourcesContent":["import {html, 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-tab-header.styles.js';\n\n/**\n * @tag vscode-tab-header\n *\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-panelTitle-activeBorder=#0078d4]\n * @cssprop [--vscode-panelTitle-activeForeground=#cccccc]\n * @cssprop [--vscode-panelTitle-inactiveForeground=#9d9d9d]\n */\n@customElement('vscode-tab-header')\nexport class VscodeTabHeader extends VscElement {\n static override styles = styles;\n\n @property({type: Boolean, reflect: true})\n active = false;\n\n /** @internal */\n @property({reflect: true, attribute: 'aria-controls'})\n ariaControls = '';\n\n /**\n * Panel-like look\n */\n @property({type: Boolean, reflect: true})\n panel = false;\n\n /** @internal */\n @property({reflect: true})\n override role = 'tab';\n\n /** @internal */\n @property({type: Number, reflect: true, attribute: 'tab-id'})\n tabId = -1;\n\n override attributeChangedCallback(\n name: string,\n old: string | null,\n value: string | null\n ): void {\n super.attributeChangedCallback(name, old, value);\n\n if (name === 'active') {\n const active = value !== null;\n this.ariaSelected = active ? 'true' : 'false';\n this.tabIndex = active ? 0 : -1;\n }\n }\n\n override render(): TemplateResult {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n active: this.active,\n panel: this.panel,\n })}\n >\n <div class=\"before\"><slot name=\"content-before\"></slot></div>\n <div class=\"main\"><slot></slot></div>\n <div class=\"after\"><slot name=\"content-after\"></slot></div>\n <span\n class=${classMap({\n 'active-indicator': true,\n active: this.active,\n panel: this.panel,\n })}\n ></span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-tab-header': VscodeTabHeader;\n }\n}\n"]}
package/dist/vscode-tab-header/vscode-tab-header.styles.js CHANGED
@@ -12,7 +12,7 @@ const styles = [
12
12
  .wrapper {
13
13
  align-items: center;
14
14
  border-bottom: 1px solid transparent;
15
- color: var(--vscode-foreground);
15
+ color: var(--vscode-foreground, #cccccc);
16
16
  display: flex;
17
17
  min-height: 20px;
18
18
  overflow: hidden;
@@ -23,8 +23,8 @@ const styles = [
23
23
  }
24
24
 
25
25
  :host([active]) .wrapper {
26
- border-bottom-color: var(--vscode-panelTitle-activeForeground);
27
- color: var(--vscode-panelTitle-activeForeground);
26
+ border-bottom-color: var(--vscode-panelTitle-activeForeground, #cccccc);
27
+ color: var(--vscode-panelTitle-activeForeground, #cccccc);
28
28
  }
29
29
 
30
30
  :host([panel]) .wrapper {
@@ -39,7 +39,7 @@ const styles = [
39
39
 
40
40
  .wrapper {
41
41
  align-items: center;
42
- color: var(--vscode-foreground);
42
+ color: var(--vscode-foreground, #cccccc);
43
43
  display: flex;
44
44
  min-height: 20px;
45
45
  overflow: inherit;
@@ -48,12 +48,12 @@ const styles = [
48
48
  }
49
49
 
50
50
  .wrapper.panel {
51
- color: var(--vscode-panelTitle-inactiveForeground);
51
+ color: var(--vscode-panelTitle-inactiveForeground, #9d9d9d);
52
52
  }
53
53
 
54
54
  .wrapper.panel.active,
55
55
  .wrapper.panel:hover {
56
- color: var(--vscode-panelTitle-activeForeground);
56
+ color: var(--vscode-panelTitle-activeForeground, #cccccc);
57
57
  }
58
58
 
59
59
  :host([panel]) .wrapper {
@@ -74,7 +74,7 @@ const styles = [
74
74
  }
75
75
 
76
76
  .active-indicator.panel.active {
77
- border-top: 1px solid var(--vscode-panelTitle-activeBorder);
77
+ border-top: 1px solid var(--vscode-panelTitle-activeBorder, #0078d4);
78
78
  bottom: 4px;
79
79
  display: block;
80
80
  left: 8px;
@@ -84,7 +84,7 @@ const styles = [
84
84
  }
85
85
 
86
86
  :host(:focus-visible) .wrapper {
87
- outline-color: var(--vscode-focusBorder);
87
+ outline-color: var(--vscode-focusBorder, #0078d4);
88
88
  outline-offset: 3px;
89
89
  outline-style: solid;
90
90
  outline-width: 1px;
package/dist/vscode-tab-header/vscode-tab-header.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-tab-header.styles.js","sourceRoot":"","sources":["../../src/vscode-tab-header/vscode-tab-header.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGF;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 cursor: pointer;\n display: block;\n user-select: none;\n }\n\n .wrapper {\n align-items: center;\n border-bottom: 1px solid transparent;\n color: var(--vscode-foreground);\n display: flex;\n min-height: 20px;\n overflow: hidden;\n padding: 7px 8px;\n position: relative;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n :host([active]) .wrapper {\n border-bottom-color: var(--vscode-panelTitle-activeForeground);\n color: var(--vscode-panelTitle-activeForeground);\n }\n\n :host([panel]) .wrapper {\n border-bottom: 0;\n margin-bottom: 0;\n padding: 0;\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n .wrapper {\n align-items: center;\n color: var(--vscode-foreground);\n display: flex;\n min-height: 20px;\n overflow: inherit;\n text-overflow: inherit;\n position: relative;\n }\n\n .wrapper.panel {\n color: var(--vscode-panelTitle-inactiveForeground);\n }\n\n .wrapper.panel.active,\n .wrapper.panel:hover {\n color: var(--vscode-panelTitle-activeForeground);\n }\n\n :host([panel]) .wrapper {\n display: flex;\n font-size: 11px;\n height: 31px;\n padding: 2px 10px;\n text-transform: uppercase;\n }\n\n .main {\n overflow: inherit;\n text-overflow: inherit;\n }\n\n .active-indicator {\n display: none;\n }\n\n .active-indicator.panel.active {\n border-top: 1px solid var(--vscode-panelTitle-activeBorder);\n bottom: 4px;\n display: block;\n left: 8px;\n pointer-events: none;\n position: absolute;\n right: 8px;\n }\n\n :host(:focus-visible) .wrapper {\n outline-color: var(--vscode-focusBorder);\n outline-offset: 3px;\n outline-style: solid;\n outline-width: 1px;\n }\n\n :host(:focus-visible) .wrapper.panel {\n outline-offset: -2px;\n }\n\n slot[name='content-before']::slotted(vscode-badge) {\n margin-right: 8px;\n }\n\n slot[name='content-after']::slotted(vscode-badge) {\n margin-left: 8px;\n }\n `,\n];\n\nexport default styles;\n"]}
1
+ {"version":3,"file":"vscode-tab-header.styles.js","sourceRoot":"","sources":["../../src/vscode-tab-header/vscode-tab-header.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGF;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 cursor: pointer;\n display: block;\n user-select: none;\n }\n\n .wrapper {\n align-items: center;\n border-bottom: 1px solid transparent;\n color: var(--vscode-foreground, #cccccc);\n display: flex;\n min-height: 20px;\n overflow: hidden;\n padding: 7px 8px;\n position: relative;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n :host([active]) .wrapper {\n border-bottom-color: var(--vscode-panelTitle-activeForeground, #cccccc);\n color: var(--vscode-panelTitle-activeForeground, #cccccc);\n }\n\n :host([panel]) .wrapper {\n border-bottom: 0;\n margin-bottom: 0;\n padding: 0;\n }\n\n :host(:focus-visible) {\n outline: none;\n }\n\n .wrapper {\n align-items: center;\n color: var(--vscode-foreground, #cccccc);\n display: flex;\n min-height: 20px;\n overflow: inherit;\n text-overflow: inherit;\n position: relative;\n }\n\n .wrapper.panel {\n color: var(--vscode-panelTitle-inactiveForeground, #9d9d9d);\n }\n\n .wrapper.panel.active,\n .wrapper.panel:hover {\n color: var(--vscode-panelTitle-activeForeground, #cccccc);\n }\n\n :host([panel]) .wrapper {\n display: flex;\n font-size: 11px;\n height: 31px;\n padding: 2px 10px;\n text-transform: uppercase;\n }\n\n .main {\n overflow: inherit;\n text-overflow: inherit;\n }\n\n .active-indicator {\n display: none;\n }\n\n .active-indicator.panel.active {\n border-top: 1px solid var(--vscode-panelTitle-activeBorder, #0078d4);\n bottom: 4px;\n display: block;\n left: 8px;\n pointer-events: none;\n position: absolute;\n right: 8px;\n }\n\n :host(:focus-visible) .wrapper {\n outline-color: var(--vscode-focusBorder, #0078d4);\n outline-offset: 3px;\n outline-style: solid;\n outline-width: 1px;\n }\n\n :host(:focus-visible) .wrapper.panel {\n outline-offset: -2px;\n }\n\n slot[name='content-before']::slotted(vscode-badge) {\n margin-right: 8px;\n }\n\n slot[name='content-after']::slotted(vscode-badge) {\n margin-left: 8px;\n }\n `,\n];\n\nexport default styles;\n"]}
package/dist/vscode-tab-panel/vscode-tab-panel.d.ts CHANGED
@@ -3,8 +3,8 @@ import { VscElement } from '../includes/VscElement.js';
3
3
  /**
4
4
  * @tag vscode-tab-panel
5
5
  *
6
- * @cssprop --vscode-panel--background
7
- * @cssprop --vscode-focusBorder
6
+ * @cssprop [--vscode-focusBorder=#0078d4]
7
+ * @cssprop [--vscode-panel--background=#181818]
8
8
  */
9
9
  export declare class VscodeTabPanel extends VscElement {
10
10
  static styles: import("lit").CSSResultGroup;
package/dist/vscode-tab-panel/vscode-tab-panel.js CHANGED
@@ -11,8 +11,8 @@ import styles from './vscode-tab-panel.styles.js';
11
11
  /**
12
12
  * @tag vscode-tab-panel
13
13
  *
14
- * @cssprop --vscode-panel--background
15
- * @cssprop --vscode-focusBorder
14
+ * @cssprop [--vscode-focusBorder=#0078d4]
15
+ * @cssprop [--vscode-panel--background=#181818]
16
16
  */
17
17
  let VscodeTabPanel = class VscodeTabPanel extends VscElement {
18
18
  constructor() {
package/dist/vscode-tab-panel/vscode-tab-panel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-tab-panel.js","sourceRoot":"","sources":["../../src/vscode-tab-panel/vscode-tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAII,WAAM,GAAG,KAAK,CAAC;QAExB,gBAAgB;QAEhB,mBAAc,GAAG,EAAE,CAAC;QAEpB;;WAEG;QAEH,UAAK,GAAG,KAAK,CAAC;QAEd,gBAAgB;QAEP,SAAI,GAAG,UAAU,CAAC;QAE3B,gBAAgB;QAEP,aAAQ,GAAG,CAAC,CAAC;IAKxB,CAAC;IAHU,MAAM;QACb,OAAO,IAAI,CAAA,iBAAiB,CAAC;IAC/B,CAAC;;AAzBe,qBAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CACjB;AAIxB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAC,CAAC;sDACpC;AAMpB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAC3B;AAIL;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;4CACC;AAIlB;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAClB;AAtBX,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA2B1B","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-tab-panel.styles.js';\n\n/**\n * @tag vscode-tab-panel\n *\n * @cssprop --vscode-panel--background\n * @cssprop --vscode-focusBorder\n */\n@customElement('vscode-tab-panel')\nexport class VscodeTabPanel extends VscElement {\n static override styles = styles;\n\n @property({type: Boolean, reflect: true})\n override hidden = false;\n\n /** @internal */\n @property({reflect: true, attribute: 'aria-labelledby'})\n ariaLabelledby = '';\n\n /**\n * Panel-like look\n */\n @property({type: Boolean, reflect: true})\n panel = false;\n\n /** @internal */\n @property({reflect: true})\n override role = 'tabpanel';\n\n /** @internal */\n @property({type: Number, reflect: true})\n override tabIndex = 0;\n\n override render(): TemplateResult {\n return html` <slot></slot> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-tab-panel': VscodeTabPanel;\n }\n}\n"]}
1
+ {"version":3,"file":"vscode-tab-panel.js","sourceRoot":"","sources":["../../src/vscode-tab-panel/vscode-tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,2BAA2B,CAAC;AACpE,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAII,WAAM,GAAG,KAAK,CAAC;QAExB,gBAAgB;QAEhB,mBAAc,GAAG,EAAE,CAAC;QAEpB;;WAEG;QAEH,UAAK,GAAG,KAAK,CAAC;QAEd,gBAAgB;QAEP,SAAI,GAAG,UAAU,CAAC;QAE3B,gBAAgB;QAEP,aAAQ,GAAG,CAAC,CAAC;IAKxB,CAAC;IAHU,MAAM;QACb,OAAO,IAAI,CAAA,iBAAiB,CAAC;IAC/B,CAAC;;AAzBe,qBAAM,GAAG,MAAM,AAAT,CAAU;AAGvB;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CACjB;AAIxB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAC,CAAC;sDACpC;AAMpB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAC3B;AAIL;IADR,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;4CACC;AAIlB;IADR,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAClB;AAtBX,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA2B1B","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement, VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-tab-panel.styles.js';\n\n/**\n * @tag vscode-tab-panel\n *\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-panel--background=#181818]\n */\n@customElement('vscode-tab-panel')\nexport class VscodeTabPanel extends VscElement {\n static override styles = styles;\n\n @property({type: Boolean, reflect: true})\n override hidden = false;\n\n /** @internal */\n @property({reflect: true, attribute: 'aria-labelledby'})\n ariaLabelledby = '';\n\n /**\n * Panel-like look\n */\n @property({type: Boolean, reflect: true})\n panel = false;\n\n /** @internal */\n @property({reflect: true})\n override role = 'tabpanel';\n\n /** @internal */\n @property({type: Number, reflect: true})\n override tabIndex = 0;\n\n override render(): TemplateResult {\n return html` <slot></slot> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'vscode-tab-panel': VscodeTabPanel;\n }\n}\n"]}
package/dist/vscode-tab-panel/vscode-tab-panel.styles.js CHANGED
@@ -9,14 +9,14 @@ const styles = [
9
9
  }
10
10
 
11
11
  :host(:focus-visible) {
12
- outline-color: var(--vscode-focusBorder);
12
+ outline-color: var(--vscode-focusBorder, #0078d4);
13
13
  outline-offset: 3px;
14
14
  outline-style: solid;
15
15
  outline-width: 1px;
16
16
  }
17
17
 
18
18
  :host([panel]) {
19
- background-color: var(--vscode-panel-background);
19
+ background-color: var(--vscode-panel-background, #181818);
20
20
  }
21
21
  `,
22
22
  ];
package/dist/vscode-tab-panel/vscode-tab-panel.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-tab-panel.styles.js","sourceRoot":"","sources":["../../src/vscode-tab-panel/vscode-tab-panel.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;;;;;;;;;;;;;;;;GAgBF;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 overflow: hidden;\n }\n\n :host(:focus-visible) {\n outline-color: var(--vscode-focusBorder);\n outline-offset: 3px;\n outline-style: solid;\n outline-width: 1px;\n }\n\n :host([panel]) {\n background-color: var(--vscode-panel-background);\n }\n `,\n];\n\nexport default styles;\n"]}
1
+ {"version":3,"file":"vscode-tab-panel.styles.js","sourceRoot":"","sources":["../../src/vscode-tab-panel/vscode-tab-panel.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;;;;;;;;;;;;;;;;GAgBF;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 overflow: hidden;\n }\n\n :host(:focus-visible) {\n outline-color: var(--vscode-focusBorder, #0078d4);\n outline-offset: 3px;\n outline-style: solid;\n outline-width: 1px;\n }\n\n :host([panel]) {\n background-color: var(--vscode-panel-background, #181818);\n }\n `,\n];\n\nexport default styles;\n"]}
package/dist/vscode-table/vscode-table.d.ts CHANGED
@@ -4,13 +4,9 @@ import '../vscode-scrollable/index.js';
4
4
  /**
5
5
  * @tag vscode-table
6
6
  *
7
- * @cssprop [--border=var(--vscode-editorGroup-border)]
8
- * @cssprop [--foreground=var(--vscode-foreground)]
9
- * @cssprop [--resize-hover-border=var(--vscode-sash-hoverBorder)]
10
- * @cssprop [--tinted-row-background=var(--vscode-keybindingTable-rowsBackground)]
11
- * @cssprop [--header-background=var(--vscode-keybindingTable-headerBackground)]
12
- * @cssprop [--font-size=var(--vscode-font-size)]
13
- * @cssprop [--font-family=var(--vscode-font-family)]
7
+ * @cssprop [--vscode-editorGroup-border=rgba(255, 255, 255, 0.09)]
8
+ * @cssprop [--vscode-keybindingTable-rowsBackground=rgba(204, 204, 204, 0.04)]
9
+ * @cssprop [--vscode-sash-hoverBorder=#0078d4]
14
10
  */
15
11
  export declare class VscodeTable extends VscElement {
16
12
  static styles: import("lit").CSSResultGroup;
package/dist/vscode-table/vscode-table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vscode-table.d.ts","sourceRoot":"","sources":["../../src/vscode-table/vscode-table.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"vscode-table.d.ts","sourceRoot":"","sources":["../../src/vscode-table/vscode-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAC,MAAM,KAAK,CAAC;AASzC,OAAO,EAAgB,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAEpE,OAAO,+BAA+B,CAAC;AAWvC;;;;;;GAMG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,+BAAU;IAEhC,gBAAgB;IAEP,IAAI,SAAW;IAGxB,SAAS,UAAS;IAGlB,UAAU,UAAS;IAEnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,YAAY,UAAS;IAGrB,UAAU,SAAO;IAEjB;;;;;;;;;OASG;IACH,IACI,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,EAMxB;IACD,IAAI,OAAO,IAAI,MAAM,EAAE,CAEtB;IAED;;;;;;;;OAQG;IAEH,cAAc,SAAU;IAGxB,eAAe,UAAS;IAExB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAGjB,OAAO,CAAC,SAAS,CAAmB;IAGpC,OAAO,CAAC,cAAc,CAAkB;IAGxC,OAAO,CAAC,kBAAkB,CAAoB;IAG9C,OAAO,CAAC,oBAAoB,CAAoB;IAMhD,OAAO,CAAC,iBAAiB,CAA2B;IAOpD,OAAO,CAAC,uBAAuB,CAAiC;IAOhE,OAAO,CAAC,qBAAqB,CAA+B;IAE5D;;OAEG;IAEH,OAAO,CAAC,cAAc,CAAgB;IAGtC,OAAO,CAAC,WAAW,CAAS;IAE5B;;OAEG;IACH,OAAO,CAAC,WAAW,CAAiB;IACpC,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,wBAAwB,CAAC,CAAiB;IAClD,OAAO,CAAC,qBAAqB,CAAC,CAAiB;IAC/C,OAAO,CAAC,mBAAmB,CAAC,CAAiB;IAC7C,OAAO,CAAC,uBAAuB,CAAM;IACrC,OAAO,CAAC,uBAAuB,CAAK;IACpC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAK;IACxB;;;OAGG;IACH,OAAO,CAAC,YAAY,CAA+B;IACnD;;;OAGG;IACH,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,oBAAoB,CAA2B;IACvD,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,oBAAoB,CAAK;IAExB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAOrC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,iBAAiB;IAczB;;OAEG;IACH,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,qBAAqB;IAc7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,gCAAgC,CAStC;IAEF,OAAO,CAAC,6BAA6B,CAEnC;IAEF,OAAO,CAAC,2BAA2B,CAEjC;IAEF,OAAO,CAAC,wBAAwB;IAoChC,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,yBAAyB;IAqBjC,OAAO,CAAC,6BAA6B;IAerC,OAAO,CAAC,6BAA6B;IAOrC,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,gBAAgB;IAqCxB,OAAO,CAAC,yBAAyB;IA0BjC,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,oBAAoB,CAS1B;IAEF,OAAO,CAAC,kBAAkB,CASxB;IAEO,MAAM,IAAI,cAAc;CA0DlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
package/dist/vscode-table/vscode-table.js CHANGED
@@ -16,13 +16,9 @@ const COMPONENT_WIDTH_PERCENTAGE = 100;
16
16
  /**
17
17
  * @tag vscode-table
18
18
  *
19
- * @cssprop [--border=var(--vscode-editorGroup-border)]
20
- * @cssprop [--foreground=var(--vscode-foreground)]
21
- * @cssprop [--resize-hover-border=var(--vscode-sash-hoverBorder)]
22
- * @cssprop [--tinted-row-background=var(--vscode-keybindingTable-rowsBackground)]
23
- * @cssprop [--header-background=var(--vscode-keybindingTable-headerBackground)]
24
- * @cssprop [--font-size=var(--vscode-font-size)]
25
- * @cssprop [--font-family=var(--vscode-font-family)]
19
+ * @cssprop [--vscode-editorGroup-border=rgba(255, 255, 255, 0.09)]
20
+ * @cssprop [--vscode-keybindingTable-rowsBackground=rgba(204, 204, 204, 0.04)]
21
+ * @cssprop [--vscode-sash-hoverBorder=#0078d4]
26
22
  */
27
23
  let VscodeTable = class VscodeTable extends VscElement {
28
24
  constructor() {