docs: document details and accordion base styles properties (#10616)

Author: web-padawan

packages/accordion/src/vaadin-accordion-heading.d.ts

@@ -38,6 +38,21 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `opened`     | Set when the collapsible content is expanded and visible.
  * `disabled`   | Set when the element is disabled.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                          |
+ * :--------------------------------------------|
+ * | `--vaadin-accordion-heading-background`    |
+ * | `--vaadin-accordion-heading-border-color`  |
+ * | `--vaadin-accordion-heading-border-radius` |
+ * | `--vaadin-accordion-heading-border-width`  |
+ * | `--vaadin-accordion-heading-font-size`     |
+ * | `--vaadin-accordion-heading-font-weight`   |
+ * | `--vaadin-accordion-heading-gap`           |
+ * | `--vaadin-accordion-heading-height`        |
+ * | `--vaadin-accordion-heading-padding`       |
+ * | `--vaadin-accordion-heading-text-color`    |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(HTMLElement))) {

packages/accordion/src/vaadin-accordion-heading.js

@@ -43,6 +43,21 @@ import { accordionHeading } from './styles/vaadin-accordion-heading-base-styles.
  * `opened`     | Set when the collapsible content is expanded and visible.
  * `disabled`   | Set when the element is disabled.
  *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property                          |
+ * :--------------------------------------------|
+ * | `--vaadin-accordion-heading-background`    |
+ * | `--vaadin-accordion-heading-border-color`  |
+ * | `--vaadin-accordion-heading-border-radius` |
+ * | `--vaadin-accordion-heading-border-width`  |
+ * | `--vaadin-accordion-heading-font-size`     |
+ * | `--vaadin-accordion-heading-font-weight`   |
+ * | `--vaadin-accordion-heading-gap`           |
+ * | `--vaadin-accordion-heading-height`        |
+ * | `--vaadin-accordion-heading-padding`       |
+ * | `--vaadin-accordion-heading-text-color`    |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement

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

@@ -53,8 +53,11 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
  *
  * ### Styling
  *
- * See the [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
- * documentation for the available state attributes and stylable shadow parts.
+ * Accordion does not have own stylable shadow parts or state attributes. Instead, apply styles to
+ * the following components:
+ *
+ * - [`<vaadin-accordion-heading>`](#/elements/vaadin-accordion-heading)
+ * - [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

packages/accordion/src/vaadin-accordion.js

@@ -38,8 +38,11 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  *
  * ### Styling
  *
- * See the [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
- * documentation for the available state attributes and stylable shadow parts.
+ * Accordion does not have own stylable shadow parts or state attributes. Instead, apply styles to
+ * the following components:
+ *
+ * - [`<vaadin-accordion-heading>`](#/elements/vaadin-accordion-heading)
+ * - [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

packages/details/src/vaadin-details-summary.d.ts

@@ -29,6 +29,21 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `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-details-summary-background`    |
+ * | `--vaadin-details-summary-border-color`  |
+ * | `--vaadin-details-summary-border-radius` |
+ * | `--vaadin-details-summary-border-width`  |
+ * | `--vaadin-details-summary-font-size`     |
+ * | `--vaadin-details-summary-font-weight`   |
+ * | `--vaadin-details-summary-gap`           |
+ * | `--vaadin-details-summary-height`        |
+ * | `--vaadin-details-summary-padding`       |
+ * | `--vaadin-details-summary-text-color`    |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
 declare class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(HTMLElement))) {

packages/details/src/vaadin-details-summary.js

@@ -34,6 +34,21 @@ import { detailsSummary } from './styles/vaadin-details-summary-base-styles.js';
  * `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-details-summary-background`    |
+ * | `--vaadin-details-summary-border-color`  |
+ * | `--vaadin-details-summary-border-radius` |
+ * | `--vaadin-details-summary-border-width`  |
+ * | `--vaadin-details-summary-font-size`     |
+ * | `--vaadin-details-summary-font-weight`   |
+ * | `--vaadin-details-summary-gap`           |
+ * | `--vaadin-details-summary-height`        |
+ * | `--vaadin-details-summary-padding`       |
+ * | `--vaadin-details-summary-text-color`    |
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @customElement