@vscode-elements/elements 2.1.1-pre.0 → 2.2.0

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

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement, nothing } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement } from '../includes/VscElement.js';
@@ -101,6 +102,10 @@ let VscodeCheckbox = class VscodeCheckbox extends LabelledCheckboxOrRadioMixin(F
         this.defaultChecked = false;
         this.invalid = false;
         this.name = undefined;
+        /**
+         * When true, renders as a toggle switch instead of a checkbox.
+         */
+        this.toggle = false;
         /**
          * Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:
          *
@@ -145,14 +150,6 @@ let VscodeCheckbox = class VscodeCheckbox extends LabelledCheckboxOrRadioMixin(F
     disconnectedCallback() {
         this.removeEventListener('keydown', this._handleKeyDown);
     }
-    update(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('checked')) {
-            this.ariaChecked = this.checked ? 'true' : 'false';
-        }
-    }
     /** @internal */
     formResetCallback() {
         this.checked = this.defaultChecked;
@@ -222,6 +219,9 @@ let VscodeCheckbox = class VscodeCheckbox extends LabelledCheckboxOrRadioMixin(F
         const indeterminate = this.indeterminate
             ? html `<span class="indeterminate-icon"></span>`
             : nothing;
+        const iconContent = this.toggle
+            ? html `<span class="thumb"></span>`
+            : html `${indeterminate}${check}`;
         return html `
       <div class="wrapper">
         <input
@@ -230,9 +230,11 @@ let VscodeCheckbox = class VscodeCheckbox extends LabelledCheckboxOrRadioMixin(F
           class="checkbox"
           type="checkbox"
           ?checked=${this.checked}
+          role=${ifDefined(this.toggle ? 'switch' : undefined)}
+          aria-checked=${ifDefined(this.toggle ? (this.checked ? 'true' : 'false') : undefined)}
           value=${this.value}
         >
-        <div class=${iconClasses}>${indeterminate}${check}</div>
+        <div class=${iconClasses}>${iconContent}</div>
         <label for="input" class="label" @click=${this._handleClick}>
           <span class=${labelInnerClasses}>
             ${this._renderLabelAttribute()}
@@ -266,6 +268,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], VscodeCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], VscodeCheckbox.prototype, "toggle", void 0);
 __decorate([
     property()
 ], VscodeCheckbox.prototype, "value", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-checkbox.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, PropertyValueMap, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {FormButtonWidgetBase} from '../includes/form-button-widget/FormButtonWidgetBase.js';\nimport {LabelledCheckboxOrRadioMixin} from '../includes/form-button-widget/LabelledCheckboxOrRadio.js';\nimport styles from './vscode-checkbox.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\n/**\n * Allows users to select one or more options from a set. When participating in a form, it supports\n * the `:invalid` pseudo class. Otherwise the error styles can be applied through the `invalid`\n * property.\n *\n * @tag vscode-checkbox\n *\n * @attr name - Name which is used as a variable name in the data of the form-container.\n * @attr label - Attribute pair of the `label` property.\n * @prop label - Label text. It is only applied if component's innerHTML doesn't contain any text.\n *\n * @fires {Event} change - Dispatched when checked state is changed. The event is bubbled, so it can be listened on a parent element like the `CheckboxGroup`.\n * @fires {Event} invalid - Dispatched when the element is invalid and `checkValidity()` has been called or the form containing this element is submitted.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-checkboxBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxForeground=#cccccc]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n */\n@customElement('vscode-checkbox')\nexport class VscodeCheckbox\n  extends LabelledCheckboxOrRadioMixin(FormButtonWidgetBase)\n  implements AssociatedFormControl\n{\n  static override styles = styles;\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Automatically focus on the element when the page loads.\n   *\n   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)\n   */\n  @property({type: Boolean, reflect: true})\n  override autofocus = false;\n\n  @property({type: Boolean, reflect: true})\n  set checked(newVal: boolean) {\n    this._checked = newVal;\n    this._manageRequired();\n    this.requestUpdate();\n  }\n  get checked(): boolean {\n    return this._checked;\n  }\n\n  private _checked = false;\n\n  /**\n   * The element's initial checked state, which will be restored when the containing form is reset.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'default-checked'})\n  defaultChecked = false;\n\n  @property({type: Boolean, reflect: true})\n  invalid = false;\n\n  @property({reflect: true})\n  name: string | undefined = undefined;\n\n  /**\n   * Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:\n   *\n   * - If it is unchecked, the value will not be submitted.\n   * - If it is checked but the value is not set, `on` will be submitted.\n   * - If it is checked and value is set, the value will be submitted.\n   */\n  @property()\n  value = '';\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  indeterminate = false;\n\n  @property({type: Boolean, reflect: true})\n  set required(newVal: boolean) {\n    this._required = newVal;\n    this._manageRequired();\n    this.requestUpdate();\n  }\n  get required() {\n    return this._required;\n  }\n  private _required = false;\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** @internal */\n  @property()\n  type = 'checkbox';\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate(): boolean {\n    return this._internals.willValidate;\n  }\n\n  /**\n   * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n   * If the element's value is invalid, an invalid event is triggered on the element.\n   *\n   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /**\n   * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n   * If the element's value is invalid, an invalid event is triggered on the element, and the\n   * browser displays an error message to the user.\n   *\n   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('keydown', this._handleKeyDown);\n\n    this.updateComplete.then(() => {\n      this._manageRequired();\n      this._setActualFormValue();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  override update(\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.update(changedProperties);\n\n    if (changedProperties.has('checked')) {\n      this.ariaChecked = this.checked ? 'true' : 'false';\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.checked = this.defaultChecked;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    if (state) {\n      this.checked = true;\n    }\n  }\n\n  @query('#input')\n  private _inputEl!: HTMLInputElement;\n\n  private _internals: ElementInternals;\n\n  // Sets the value of the control according to the native checkbox behavior.\n  // - If the checkbox is unchecked, the value will be null, so the control will\n  //   excluded from the form.\n  // - If the control is checked but the value is not set, the value will be \"on\".\n  // - If the control is checked and value is set, the value won't be changed.\n  private _setActualFormValue() {\n    let actualValue: string | null = '';\n\n    if (this.checked) {\n      actualValue = !this.value ? 'on' : this.value;\n    } else {\n      actualValue = null;\n    }\n\n    this._internals.setFormValue(actualValue);\n  }\n\n  private _toggleState() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this._setActualFormValue();\n    this._manageRequired();\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  private _handleClick = (ev: MouseEvent): void => {\n    ev.preventDefault();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this._toggleState();\n  };\n\n  private _handleKeyDown = (ev: KeyboardEvent): void => {\n    if (!this.disabled && (ev.key === 'Enter' || ev.key === ' ')) {\n      ev.preventDefault();\n\n      if (ev.key === ' ') {\n        this._toggleState();\n      }\n\n      if (ev.key === 'Enter') {\n        this._internals.form?.requestSubmit();\n      }\n    }\n  };\n\n  private _manageRequired() {\n    if (!this.checked && this.required) {\n      this._internals.setValidity(\n        {\n          valueMissing: true,\n        },\n        'Please check this box if you want to proceed.',\n        this._inputEl ?? undefined\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  override render(): TemplateResult {\n    const iconClasses = classMap({\n      icon: true,\n      checked: this.checked,\n      indeterminate: this.indeterminate,\n    });\n    const labelInnerClasses = classMap({\n      'label-inner': true,\n    });\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=\"check-icon\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z\"\n      />\n    </svg>`;\n    const check = this.checked && !this.indeterminate ? icon : nothing;\n    const indeterminate = this.indeterminate\n      ? html`<span class=\"indeterminate-icon\"></span>`\n      : nothing;\n\n    return html`\n      <div class=\"wrapper\">\n        <input\n          ?autofocus=${this.autofocus}\n          id=\"input\"\n          class=\"checkbox\"\n          type=\"checkbox\"\n          ?checked=${this.checked}\n          value=${this.value}\n        >\n        <div class=${iconClasses}>${indeterminate}${check}</div>\n        <label for=\"input\" class=\"label\" @click=${this._handleClick}>\n          <span class=${labelInnerClasses}>\n            ${this._renderLabelAttribute()}\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </span>\n        </label>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-checkbox': VscodeCheckbox;\n  }\n}\n"]}
+{"version":3,"file":"vscode-checkbox.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {FormButtonWidgetBase} from '../includes/form-button-widget/FormButtonWidgetBase.js';\nimport {LabelledCheckboxOrRadioMixin} from '../includes/form-button-widget/LabelledCheckboxOrRadio.js';\nimport styles from './vscode-checkbox.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\n\n/**\n * Allows users to select one or more options from a set. When participating in a form, it supports\n * the `:invalid` pseudo class. Otherwise the error styles can be applied through the `invalid`\n * property.\n *\n * @tag vscode-checkbox\n *\n * @attr name - Name which is used as a variable name in the data of the form-container.\n * @attr label - Attribute pair of the `label` property.\n * @prop label - Label text. It is only applied if component's innerHTML doesn't contain any text.\n *\n * @fires {Event} change - Dispatched when checked state is changed. The event is bubbled, so it can be listened on a parent element like the `CheckboxGroup`.\n * @fires {Event} invalid - Dispatched when the element is invalid and `checkValidity()` has been called or the form containing this element is submitted.\n *\n * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event)\n *\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-checkboxBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxForeground=#cccccc]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n */\n@customElement('vscode-checkbox')\nexport class VscodeCheckbox\n  extends LabelledCheckboxOrRadioMixin(FormButtonWidgetBase)\n  implements AssociatedFormControl\n{\n  static override styles = styles;\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Automatically focus on the element when the page loads.\n   *\n   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)\n   */\n  @property({type: Boolean, reflect: true})\n  override autofocus = false;\n\n  @property({type: Boolean, reflect: true})\n  set checked(newVal: boolean) {\n    this._checked = newVal;\n    this._manageRequired();\n    this.requestUpdate();\n  }\n  get checked(): boolean {\n    return this._checked;\n  }\n\n  private _checked = false;\n\n  /**\n   * The element's initial checked state, which will be restored when the containing form is reset.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'default-checked'})\n  defaultChecked = false;\n\n  @property({type: Boolean, reflect: true})\n  invalid = false;\n\n  @property({reflect: true})\n  name: string | undefined = undefined;\n\n  /**\n   * When true, renders as a toggle switch instead of a checkbox.\n   */\n  @property({type: Boolean, reflect: true})\n  toggle = false;\n\n  /**\n   * Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:\n   *\n   * - If it is unchecked, the value will not be submitted.\n   * - If it is checked but the value is not set, `on` will be submitted.\n   * - If it is checked and value is set, the value will be submitted.\n   */\n  @property()\n  value = '';\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: Boolean, reflect: true})\n  indeterminate = false;\n\n  @property({type: Boolean, reflect: true})\n  set required(newVal: boolean) {\n    this._required = newVal;\n    this._manageRequired();\n    this.requestUpdate();\n  }\n  get required() {\n    return this._required;\n  }\n  private _required = false;\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** @internal */\n  @property()\n  type = 'checkbox';\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate(): boolean {\n    return this._internals.willValidate;\n  }\n\n  /**\n   * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n   * If the element's value is invalid, an invalid event is triggered on the element.\n   *\n   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /**\n   * Returns `true` if the element's value is valid; otherwise, it returns `false`.\n   * If the element's value is invalid, an invalid event is triggered on the element, and the\n   * browser displays an error message to the user.\n   *\n   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('keydown', this._handleKeyDown);\n\n    this.updateComplete.then(() => {\n      this._manageRequired();\n      this._setActualFormValue();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.checked = this.defaultChecked;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    if (state) {\n      this.checked = true;\n    }\n  }\n\n  @query('#input')\n  private _inputEl!: HTMLInputElement;\n\n  private _internals: ElementInternals;\n\n  // Sets the value of the control according to the native checkbox behavior.\n  // - If the checkbox is unchecked, the value will be null, so the control will\n  //   excluded from the form.\n  // - If the control is checked but the value is not set, the value will be \"on\".\n  // - If the control is checked and value is set, the value won't be changed.\n  private _setActualFormValue() {\n    let actualValue: string | null = '';\n\n    if (this.checked) {\n      actualValue = !this.value ? 'on' : this.value;\n    } else {\n      actualValue = null;\n    }\n\n    this._internals.setFormValue(actualValue);\n  }\n\n  private _toggleState() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this._setActualFormValue();\n    this._manageRequired();\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n\n  private _handleClick = (ev: MouseEvent): void => {\n    ev.preventDefault();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this._toggleState();\n  };\n\n  private _handleKeyDown = (ev: KeyboardEvent): void => {\n    if (!this.disabled && (ev.key === 'Enter' || ev.key === ' ')) {\n      ev.preventDefault();\n\n      if (ev.key === ' ') {\n        this._toggleState();\n      }\n\n      if (ev.key === 'Enter') {\n        this._internals.form?.requestSubmit();\n      }\n    }\n  };\n\n  private _manageRequired() {\n    if (!this.checked && this.required) {\n      this._internals.setValidity(\n        {\n          valueMissing: true,\n        },\n        'Please check this box if you want to proceed.',\n        this._inputEl ?? undefined\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  override render(): TemplateResult {\n    const iconClasses = classMap({\n      icon: true,\n      checked: this.checked,\n      indeterminate: this.indeterminate,\n    });\n    const labelInnerClasses = classMap({\n      'label-inner': true,\n    });\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=\"check-icon\"\n    >\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z\"\n      />\n    </svg>`;\n    const check = this.checked && !this.indeterminate ? icon : nothing;\n    const indeterminate = this.indeterminate\n      ? html`<span class=\"indeterminate-icon\"></span>`\n      : nothing;\n\n    const iconContent = this.toggle\n      ? html`<span class=\"thumb\"></span>`\n      : html`${indeterminate}${check}`;\n\n    return html`\n      <div class=\"wrapper\">\n        <input\n          ?autofocus=${this.autofocus}\n          id=\"input\"\n          class=\"checkbox\"\n          type=\"checkbox\"\n          ?checked=${this.checked}\n          role=${ifDefined(this.toggle ? 'switch' : undefined)}\n          aria-checked=${ifDefined(\n            this.toggle ? (this.checked ? 'true' : 'false') : undefined\n          )}\n          value=${this.value}\n        >\n        <div class=${iconClasses}>${iconContent}</div>\n        <label for=\"input\" class=\"label\" @click=${this._handleClick}>\n          <span class=${labelInnerClasses}>\n            ${this._renderLabelAttribute()}\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </span>\n        </label>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-checkbox': VscodeCheckbox;\n  }\n}\n"]}

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

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

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

@@ -26,6 +26,77 @@ const styles = [
       outline: 1px solid var(--vscode-focusBorder, #0078d4);
       outline-offset: -1px;
     }
+
+    /* Toggle appearance */
+    :host([toggle]) .icon {
+      /* Track */
+      width: 36px;
+      height: 20px;
+      border-radius: 999px;
+      background-color: var(--vscode-button-secondaryBackground, #313131);
+      border-color: var(--vscode-button-border, transparent);
+      justify-content: flex-start;
+      position: absolute;
+    }
+
+    :host(:focus):host([toggle]):host(:not([disabled])) .icon {
+      outline-offset: 2px;
+    }
+
+    /* Reserve space for the wider toggle track so text doesn't overlap */
+    :host([toggle]) .label-inner {
+      padding-left: 45px; /* 36px track + 9px spacing */
+    }
+
+    :host([toggle]) .label {
+      min-height: 20px;
+    }
+
+    :host([toggle]) .wrapper {
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    :host([toggle]) .thumb {
+      /* Thumb */
+      box-sizing: border-box;
+      display: block;
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background-color: var(--vscode-button-secondaryForeground, #cccccc);
+      margin-left: 1px;
+      transition: transform 120ms ease-in-out;
+    }
+
+    :host([toggle][checked]) .icon {
+      background-color: var(--vscode-button-background, #04395e);
+      border-color: var(--vscode-button-border, transparent);
+    }
+
+    :host([toggle][checked]) .thumb {
+      transform: translateX(16px);
+      background-color: var(--vscode-button-foreground, #ffffff);
+    }
+
+    :host([toggle]):host(:invalid) .icon {
+      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
+      border-color: var(--vscode-inputValidation-errorBorder, #be1100);
+    }
+
+    :host([toggle]):host(:invalid) .thumb {
+      background-color: var(--vscode-inputValidation-errorBorder, #be1100);
+    }
+
+    :host([toggle]) .check-icon,
+    :host([toggle]) .indeterminate-icon {
+      display: none;
+    }
+
+    :host([toggle]:focus):host(:not([disabled])) .icon {
+      outline: 1px solid var(--vscode-focusBorder, #0078d4);
+      outline-offset: -1px;
+    }
   `,
 ];
 export default styles;

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

@@ -1 +1 @@
-{"version":3,"file":"vscode-checkbox.styles.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,UAAU,MAAM,+CAA+C,CAAC;AAEvE,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport baseStyles from '../includes/form-button-widget/base.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  baseStyles,\n  css`\n    :host(:invalid) .icon,\n    :host([invalid]) .icon {\n      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n      border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n    }\n\n    .icon {\n      border-radius: 3px;\n    }\n\n    .indeterminate-icon {\n      background-color: currentColor;\n      position: absolute;\n      height: 1px;\n      width: 12px;\n    }\n\n    :host(:focus):host(:not([disabled])) .icon {\n      outline: 1px solid var(--vscode-focusBorder, #0078d4);\n      outline-offset: -1px;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-checkbox.styles.js","sourceRoot":"","sources":["../../src/vscode-checkbox/vscode-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,UAAU,MAAM,+CAA+C,CAAC;AAEvE,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\nimport baseStyles from '../includes/form-button-widget/base.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  baseStyles,\n  css`\n    :host(:invalid) .icon,\n    :host([invalid]) .icon {\n      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n      border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n    }\n\n    .icon {\n      border-radius: 3px;\n    }\n\n    .indeterminate-icon {\n      background-color: currentColor;\n      position: absolute;\n      height: 1px;\n      width: 12px;\n    }\n\n    :host(:focus):host(:not([disabled])) .icon {\n      outline: 1px solid var(--vscode-focusBorder, #0078d4);\n      outline-offset: -1px;\n    }\n\n    /* Toggle appearance */\n    :host([toggle]) .icon {\n      /* Track */\n      width: 36px;\n      height: 20px;\n      border-radius: 999px;\n      background-color: var(--vscode-button-secondaryBackground, #313131);\n      border-color: var(--vscode-button-border, transparent);\n      justify-content: flex-start;\n      position: absolute;\n    }\n\n    :host(:focus):host([toggle]):host(:not([disabled])) .icon {\n      outline-offset: 2px;\n    }\n\n    /* Reserve space for the wider toggle track so text doesn't overlap */\n    :host([toggle]) .label-inner {\n      padding-left: 45px; /* 36px track + 9px spacing */\n    }\n\n    :host([toggle]) .label {\n      min-height: 20px;\n    }\n\n    :host([toggle]) .wrapper {\n      min-height: 20px;\n      line-height: 20px;\n    }\n\n    :host([toggle]) .thumb {\n      /* Thumb */\n      box-sizing: border-box;\n      display: block;\n      width: 16px;\n      height: 16px;\n      border-radius: 50%;\n      background-color: var(--vscode-button-secondaryForeground, #cccccc);\n      margin-left: 1px;\n      transition: transform 120ms ease-in-out;\n    }\n\n    :host([toggle][checked]) .icon {\n      background-color: var(--vscode-button-background, #04395e);\n      border-color: var(--vscode-button-border, transparent);\n    }\n\n    :host([toggle][checked]) .thumb {\n      transform: translateX(16px);\n      background-color: var(--vscode-button-foreground, #ffffff);\n    }\n\n    :host([toggle]):host(:invalid) .icon {\n      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);\n      border-color: var(--vscode-inputValidation-errorBorder, #be1100);\n    }\n\n    :host([toggle]):host(:invalid) .thumb {\n      background-color: var(--vscode-inputValidation-errorBorder, #be1100);\n    }\n\n    :host([toggle]) .check-icon,\n    :host([toggle]) .indeterminate-icon {\n      display: none;\n    }\n\n    :host([toggle]:focus):host(:not([disabled])) .icon {\n      outline: 1px solid var(--vscode-focusBorder, #0078d4);\n      outline-offset: -1px;\n    }\n  `,\n];\n\nexport default styles;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode-elements/elements",
-  "version": "2.1.1-pre.0",
+  "version": "2.2.0",
   "description": "Web components for creating Visual Studio Code extensions",
   "main": "dist/main.js",
   "module": "dist/main.js",

package/vscode.css-custom-data.json

@@ -2,6 +2,21 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "properties": [
+    { "name": "--vscode-button-background", "values": [] },
+    { "name": "--vscode-button-foreground", "values": [] },
+    { "name": "--vscode-button-border", "values": [] },
+    { "name": "--vscode-button-hoverBackground", "values": [] },
+    {
+      "name": "--vscode-font-family",
+      "description": "A sans-serif font type depends on the host OS.",
+      "values": []
+    },
+    { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-font-weight", "values": [] },
+    { "name": "--vscode-button-secondaryForeground", "values": [] },
+    { "name": "--vscode-button-secondaryBackground", "values": [] },
+    { "name": "--vscode-button-secondaryHoverBackground", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
     {
       "name": "--vscode-font-family",
       "description": "A sans-serif font type depends on the host OS.",
@@ -43,21 +58,6 @@
     { "name": "--vscode-button-secondaryBackground", "values": [] },
     { "name": "--vscode-button-secondaryHoverBackground", "values": [] },
     { "name": "--vscode-focusBorder", "values": [] },
-    { "name": "--vscode-button-background", "values": [] },
-    { "name": "--vscode-button-foreground", "values": [] },
-    { "name": "--vscode-button-border", "values": [] },
-    { "name": "--vscode-button-hoverBackground", "values": [] },
-    {
-      "name": "--vscode-font-family",
-      "description": "A sans-serif font type depends on the host OS.",
-      "values": []
-    },
-    { "name": "--vscode-font-size", "values": [] },
-    { "name": "--vscode-font-weight", "values": [] },
-    { "name": "--vscode-button-secondaryForeground", "values": [] },
-    { "name": "--vscode-button-secondaryBackground", "values": [] },
-    { "name": "--vscode-button-secondaryHoverBackground", "values": [] },
-    { "name": "--vscode-focusBorder", "values": [] },
     { "name": "--vscode-font-family", "values": [] },
     { "name": "--vscode-font-size", "values": [] },
     { "name": "--vscode-font-weight", "values": [] },
@@ -283,6 +283,10 @@
     { "name": "--vscode-tree-indentGuidesStroke", "values": [] }
   ],
   "pseudoElements": [
+    {
+      "name": "::part(base)",
+      "description": "The main content area of the component."
+    },
     {
       "name": "::part(body)",
       "description": "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."

package/vscode.html-custom-data.json

@@ -2,26 +2,9 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "vscode-badge",
-      "description": "Show counts or status information. Badges can also be used within [Textfield](https://vscode-elements.github.io/components/textfield) and [TabHeader](https://vscode-elements.github.io/components/tabs) components.\n---\n\n\n### **CSS Properties:**\n - **--vscode-font-family** - A sans-serif font type depends on the host OS. _(default: sans-serif)_\n- **--vscode-contrastBorder** - undefined _(default: transparent)_\n- **--vscode-badge-background** - default and counter variant background color _(default: #616161)_\n- **--vscode-badge-foreground** - default and counter variant foreground color _(default: #f8f8f8)_\n- **--vscode-activityBarBadge-background** - activity bar variant background color _(default: #0078d4)_\n- **--vscode-activityBarBadge-foreground** - activity bar variant foreground color _(default: #ffffff)_",
-      "attributes": [
-        {
-          "name": "variant",
-          "values": [
-            { "name": "" },
-            { "name": "default" },
-            { "name": "counter" },
-            { "name": "activity-bar-counter" },
-            { "name": "tab-header-counter" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "vscode-button",
-      "description": "Clickable element that are used to trigger actions.\n---\n\n\n### **CSS Properties:**\n - **--vscode-button-background** - undefined _(default: #0078d4)_\n- **--vscode-button-foreground** - undefined _(default: #ffffff)_\n- **--vscode-button-border** - undefined _(default: var(--vscode-button-background, rgba(255, 255, 255, 0.07)))_\n- **--vscode-button-hoverBackground** - undefined _(default: #026ec1)_\n- **--vscode-font-family** - A sans-serif font type depends on the host OS. _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-button-secondaryForeground** - undefined _(default: #cccccc)_\n- **--vscode-button-secondaryBackground** - undefined _(default: #313131)_\n- **--vscode-button-secondaryHoverBackground** - undefined _(default: #3c3c3c)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_",
+      "description": "Clickable element that are used to trigger actions.\n---\n\n\n### **Slots:**\n - **content-before** - Slot before the main content.\n- **content-after** - Slot after the main content.\n\n### **CSS Properties:**\n - **--vscode-button-background** - undefined _(default: #0078d4)_\n- **--vscode-button-foreground** - undefined _(default: #ffffff)_\n- **--vscode-button-border** - undefined _(default: var(--vscode-button-background, rgba(255, 255, 255, 0.07)))_\n- **--vscode-button-hoverBackground** - undefined _(default: #026ec1)_\n- **--vscode-font-family** - A sans-serif font type depends on the host OS. _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-button-secondaryForeground** - undefined _(default: #cccccc)_\n- **--vscode-button-secondaryBackground** - undefined _(default: #313131)_\n- **--vscode-button-secondaryHoverBackground** - undefined _(default: #3c3c3c)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_\n\n### **CSS Parts:**\n - **base** - The main content area of the component.",
       "attributes": [
         { "name": "autofocus", "values": [] },
         {
@@ -75,6 +58,23 @@
       ],
       "references": []
     },
+    {
+      "name": "vscode-badge",
+      "description": "Show counts or status information. Badges can also be used within [Textfield](https://vscode-elements.github.io/components/textfield) and [TabHeader](https://vscode-elements.github.io/components/tabs) components.\n---\n\n\n### **CSS Properties:**\n - **--vscode-font-family** - A sans-serif font type depends on the host OS. _(default: sans-serif)_\n- **--vscode-contrastBorder** - undefined _(default: transparent)_\n- **--vscode-badge-background** - default and counter variant background color _(default: #616161)_\n- **--vscode-badge-foreground** - default and counter variant foreground color _(default: #f8f8f8)_\n- **--vscode-activityBarBadge-background** - activity bar variant background color _(default: #0078d4)_\n- **--vscode-activityBarBadge-foreground** - activity bar variant foreground color _(default: #ffffff)_",
+      "attributes": [
+        {
+          "name": "variant",
+          "values": [
+            { "name": "" },
+            { "name": "default" },
+            { "name": "counter" },
+            { "name": "activity-bar-counter" },
+            { "name": "tab-header-counter" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "vscode-button-group",
       "description": "Shows a split button, including several components in a single button. Commonly used to show a button with a dropdown to the right.\n---\n\n\n### **CSS Properties:**\n - **--vscode-button-background** - undefined _(default: #0078d4)_\n- **--vscode-button-foreground** - undefined _(default: #ffffff)_\n- **--vscode-button-border** - undefined _(default: var(--vscode-button-background, rgba(255, 255, 255, 0.07)))_\n- **--vscode-button-hoverBackground** - undefined _(default: #026ec1)_\n- **--vscode-font-family** - A sans-serif font type depends on the host OS. _(default: sans-serif)_\n- **--vscode-font-size** - undefined _(default: 13px)_\n- **--vscode-font-weight** - undefined _(default: normal)_\n- **--vscode-button-secondaryForeground** - undefined _(default: #cccccc)_\n- **--vscode-button-secondaryBackground** - undefined _(default: #313131)_\n- **--vscode-button-secondaryHoverBackground** - undefined _(default: #3c3c3c)_\n- **--vscode-focusBorder** - undefined _(default: #0078d4)_",
@@ -107,6 +107,11 @@
           "values": []
         },
         { "name": "invalid", "values": [] },
+        {
+          "name": "toggle",
+          "description": "When true, renders as a toggle switch instead of a checkbox.",
+          "values": []
+        },
         {
           "name": "value",
           "description": "Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:\n\n- If it is unchecked, the value will not be submitted.\n- If it is checked but the value is not set, `on` will be submitted.\n- If it is checked and value is set, the value will be submitted.",