docs: add app-layout and drawer toggle base style props to JSDoc (#10671) (#10680)

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

Author: vaadin-bot

packages/app-layout/src/vaadin-app-layout.d.ts

@@ -86,6 +86,22 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
  * `has-drawer`   | Set when the element has light DOM content in the drawer slot.
  * `has-navbar`   | Set when the element has light DOM content in the navbar slot.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                                  |
+ * :----------------------------------------------------|
+ * | `--vaadin-app-layout-drawer-background`            |
+ * | `--vaadin-app-layout-drawer-width`                 |
+ * | `--vaadin-app-layout-navbar-background`            |
+ * | `--vaadin-app-layout-navbar-gap`                   |
+ * | `--vaadin-app-layout-navbar-padding-bottom`        |
+ * | `--vaadin-app-layout-navbar-padding-inline-end`    |
+ * | `--vaadin-app-layout-navbar-padding-inline-start`  |
+ * | `--vaadin-app-layout-navbar-padding-top`           |
+ * | `--vaadin-app-layout-transition-duration`          |
+ * | `--vaadin-overlay-backdrop-background`             |
+ * | `--vaadin-overlay-shadow`                          |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Component's slots

packages/app-layout/src/vaadin-app-layout.js

@@ -58,15 +58,31 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
  * `navbar-bottom`  | Container for the bottom navigation bar
  * `drawer`         | Container for the drawer area
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
  * The following state attributes are available for styling:
  *
  * Attribute      | Description
  * ---------------|-------------
  * `has-drawer`   | Set when the element has light DOM content in the drawer slot.
  * `has-navbar`   | Set when the element has light DOM content in the navbar slot.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                                  |
+ * :----------------------------------------------------|
+ * | `--vaadin-app-layout-drawer-background`            |
+ * | `--vaadin-app-layout-drawer-width`                 |
+ * | `--vaadin-app-layout-navbar-background`            |
+ * | `--vaadin-app-layout-navbar-gap`                   |
+ * | `--vaadin-app-layout-navbar-padding-bottom`        |
+ * | `--vaadin-app-layout-navbar-padding-inline-end`    |
+ * | `--vaadin-app-layout-navbar-padding-inline-start`  |
+ * | `--vaadin-app-layout-navbar-padding-top`           |
+ * | `--vaadin-app-layout-transition-duration`          |
+ * | `--vaadin-overlay-backdrop-background`             |
+ * | `--vaadin-overlay-shadow`                          |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * ### Component's slots
  *
  * The following slots are available to be set

packages/app-layout/src/vaadin-drawer-toggle.d.ts

@@ -15,6 +15,38 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *   <vaadin-drawer-toggle slot="navbar">Toggle drawer</vaadin-drawer-toggle>
  * </vaadin-app-layout>
  * ```
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name    | Description
+ * -------------|------------
+ * `icon`       | The icon element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|------------
+ * `focus-ring` | Set when the element is focused using the keyboard
+ * `focused`    | Set when the element is focused
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-button-background`     |
+ * | `--vaadin-button-border-color`   |
+ * | `--vaadin-button-border-radius`  |
+ * | `--vaadin-button-border-width`   |
+ * | `--vaadin-button-font-size`      |
+ * | `--vaadin-button-line-height`    |
+ * | `--vaadin-button-margin`         |
+ * | `--vaadin-button-padding`        |
+ * | `--vaadin-button-text-color`     |
+ * | `--vaadin-icon-size`             |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(HTMLElement))) {
   ariaLabel: string;

packages/app-layout/src/vaadin-drawer-toggle.js

@@ -23,6 +23,38 @@ import { drawerToggle } from './styles/vaadin-drawer-toggle-base-styles.js';
  * </vaadin-app-layout>
  * ```
  *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name    | Description
+ * -------------|------------
+ * `icon`       | The icon element
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------|------------
+ * `focus-ring` | Set when the element is focused using the keyboard
+ * `focused`    | Set when the element is focused
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                |
+ * :----------------------------------|
+ * | `--vaadin-button-background`     |
+ * | `--vaadin-button-border-color`   |
+ * | `--vaadin-button-border-radius`  |
+ * | `--vaadin-button-border-width`   |
+ * | `--vaadin-button-font-size`      |
+ * | `--vaadin-button-line-height`    |
+ * | `--vaadin-button-margin`         |
+ * | `--vaadin-button-padding`        |
+ * | `--vaadin-button-text-color`     |
+ * | `--vaadin-icon-size`             |
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes ButtonMixin