docs: add tabs and tabsheet base style properties to JSDoc (#10633) (#10637)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/tabs/src/vaadin-tab.d.ts

@@ -26,6 +26,19 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `orientation`  | Set to `horizontal` or `vertical` depending on the direction of items
  * `has-tooltip`  | Set when the tab has a slotted tooltip
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property            |
+ * :------------------------------|
+ * | `--vaadin-tab-background`    |
+ * | `--vaadin-tab-border-color`  |
+ * | `--vaadin-tab-border-width`  |
+ * | `--vaadin-tab-font-size`     |
+ * | `--vaadin-tab-font-weight`   |
+ * | `--vaadin-tab-gap`           |
+ * | `--vaadin-tab-padding`       |
+ * | `--vaadin-tab-text-color`    |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class Tab extends ElementMixin(ThemableMixin(ItemMixin(HTMLElement))) {}

packages/tabs/src/vaadin-tab.js

@@ -32,6 +32,19 @@ import { tabStyles } from './styles/vaadin-tab-base-styles.js';
  * `orientation`  | Set to `horizontal` or `vertical` depending on the direction of items
  * `has-tooltip`  | Set when the tab has a slotted tooltip
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property            |
+ * :------------------------------|
+ * | `--vaadin-tab-background`    |
+ * | `--vaadin-tab-border-color`  |
+ * | `--vaadin-tab-border-width`  |
+ * | `--vaadin-tab-font-size`     |
+ * | `--vaadin-tab-font-weight`   |
+ * | `--vaadin-tab-gap`           |
+ * | `--vaadin-tab-padding`       |
+ * | `--vaadin-tab-text-color`    |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement

packages/tabs/src/vaadin-tabs.d.ts

@@ -56,6 +56,19 @@ export interface TabsEventMap extends HTMLElementEventMap, TabsCustomEventMap {}
  * `orientation`  | Tabs disposition, valid values are `horizontal` and `vertical`
  * `overflow`     | It's set to `start`, `end`, none or both.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property              |
+ * :--------------------------------|
+ * | `--vaadin-tabs-background`     |
+ * | `--vaadin-tabs-border-color`   |
+ * | `--vaadin-tabs-border-radius`  |
+ * | `--vaadin-tabs-border-width`   |
+ * | `--vaadin-tabs-font-size`      |
+ * | `--vaadin-tabs-font-weight`    |
+ * | `--vaadin-tabs-gap`            |
+ * | `--vaadin-tabs-padding`        |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.

packages/tabs/src/vaadin-tabs.js

@@ -42,6 +42,19 @@ import { TabsMixin } from './vaadin-tabs-mixin.js';
  * `orientation`  | Tabs disposition, valid values are `horizontal` and `vertical`
  * `overflow`     | It's set to `start`, `end`, none or both.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property              |
+ * :--------------------------------|
+ * | `--vaadin-tabs-background`     |
+ * | `--vaadin-tabs-border-color`   |
+ * | `--vaadin-tabs-border-radius`  |
+ * | `--vaadin-tabs-border-width`   |
+ * | `--vaadin-tabs-font-size`      |
+ * | `--vaadin-tabs-font-weight`    |
+ * | `--vaadin-tabs-gap`            |
+ * | `--vaadin-tabs-padding`        |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.

packages/tabsheet/src/vaadin-tabsheet.d.ts

@@ -63,6 +63,16 @@ export interface TabSheetEventMap extends HTMLElementEventMap, TabSheetCustomEve
  * `loading` | Set when a tab without associated content is selected
  * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                  |
+ * :------------------------------------|
+ * | `--vaadin-tabsheet-border-color`   |
+ * | `--vaadin-tabsheet-border-radius`  |
+ * | `--vaadin-tabsheet-border-width`   |
+ * | `--vaadin-tabsheet-gap`            |
+ * | `--vaadin-tabsheet-padding`        |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.

packages/tabsheet/src/vaadin-tabsheet.js

@@ -51,6 +51,16 @@ import { TabSheetMixin } from './vaadin-tabsheet-mixin.js';
  * `loading` | Set when a tab without associated content is selected
  * `overflow`   | Set to `top`, `bottom`, `start`, `end`, all of them, or none.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                  |
+ * :------------------------------------|
+ * | `--vaadin-tabsheet-border-color`   |
+ * | `--vaadin-tabsheet-border-radius`  |
+ * | `--vaadin-tabsheet-border-width`   |
+ * | `--vaadin-tabsheet-gap`            |
+ * | `--vaadin-tabsheet-padding`        |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.