docs(item): document custom properties

references #14850
closes #15648

core/src/components/item/item.ios.scss

@@ -18,7 +18,7 @@
   --background-activated: #{$item-ios-background-color-active};
   --border-color: #{$item-ios-border-bottom-color};
   --color: #{$item-ios-text-color};
-  --detail-push-color: #{$item-ios-border-bottom-color};
+  --detail-icon-color: #{$item-ios-border-bottom-color};
 }
 
 :host(.activated) {
@@ -116,7 +116,7 @@
 // --------------------------------------------------
 
 .item-detail-icon {
-  color: var(--detail-push-color);
+  color: var(--detail-icon-color);
 
   font-size: 20px;
 }

core/src/components/item/item.ios.vars.scss

@@ -37,7 +37,7 @@ $item-ios-thumbnail-width:                   56px !default;
 $item-ios-thumbnail-height:                  $item-ios-thumbnail-width !default;
 
 /// @prop - Color of the detail arrow icon
-$item-ios-detail-push-color:                 $item-ios-border-color !default;
+$item-ios-detail-icon-color:                 $item-ios-border-color !default;
 
 /// @prop - Padding top for the item content
 $item-ios-padding-top:                       10px !default;

core/src/components/item/item.md.scss

@@ -22,7 +22,7 @@
   --background-activated: #{$item-md-background-color-active};
   --border-color: #{$item-md-border-bottom-color};
   --color: #{$item-md-text-color};
-  --detail-push-color: #{$item-md-border-bottom-color};
+  --detail-icon-color: #{$item-md-border-bottom-color};
 }
 
 
@@ -61,7 +61,7 @@
 // --------------------------------------------------
 
 .item-detail-icon {
-  color: var(--detail-push-color);
+  color: var(--detail-icon-color);
 
   font-size: 20px;
 }

core/src/components/item/item.md.vars.scss

@@ -22,7 +22,7 @@ $item-md-thumbnail-width:                   80px !default;
 $item-md-thumbnail-height:                  $item-md-thumbnail-width !default;
 
 /// @prop - Color of the detail arrow icon
-$item-md-detail-push-color:                 $item-md-border-color !default;
+$item-md-detail-icon-color:                 $item-md-border-color !default;
 
 /// @prop - Padding top for the item content
 $item-md-padding-top:                       11px !default;

core/src/components/item/item.scss

@@ -4,11 +4,34 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the item
+   * @prop --background-activated: Background of the activated item
+   * @prop --border-color: Color of the item border
+   * @prop --border-radius: Radius of the item border
+   * @prop --border-style: Style of the item border
+   * @prop --border-width: Width of the item border
+   * @prop --box-shadow: Box shadow of the item
+   * @prop --color: Color of the item
+   * @prop --detail-icon-color: Color of the item detail icon
+   * @prop --inner-border-width: Width of the item inner border
+   * @prop --inner-box-shadow: Box shadow of the item inner 
+   * @prop --inner-padding-bottom: Bottom padding of the item inner 
+   * @prop --inner-padding-end: End padding of the item inner 
+   * @prop --inner-padding-start: Start padding of the item inner
+   * @prop --inner-padding-top: Top padding of the item inner
+   * @prop --min-height: Minimum height of the item
+   * @prop --padding-bottom: Bottom padding of the item
+   * @prop --padding-end: End padding of the item
+   * @prop --padding-start: Start padding of the item
+   * @prop --padding-top: Top padding of the item
+   * @prop --transition: Transition of the item
+   */
   --min-height: #{$item-min-height};
   --background: #{current-color(base)};
   --background-activated: #{current-color(tint)};
   --color: #{current-color(contrast)};
-  --detail-push-color: #{current-color(shade)};
+  --detail-icon-color: #{current-color(shade)};
   --border-radius: 0;
   --border-width: 0;
   --border-style: solid;

core/src/components/item/readme.md

@@ -60,6 +60,33 @@ Items left align text and add an ellipsis when the text is wider than the item.
 | `type`            | `type`             | The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`                                                                                           | `"submit"`, `"reset"`, `"button"` |
 
 
+## CSS Custom Properties
+
+| Name                     | Description                      |
+| ------------------------ | -------------------------------- |
+| `--background`           | Background of the item           |
+| `--background-activated` | Background of the activated item |
+| `--border-color`         | Color of the item border         |
+| `--border-radius`        | Radius of the item border        |
+| `--border-style`         | Style of the item border         |
+| `--border-width`         | Width of the item border         |
+| `--box-shadow`           | Box shadow of the item           |
+| `--color`                | Color of the item                |
+| `--detail-icon-color`    | Color of the item detail icon    |
+| `--inner-border-width`   | Width of the item inner border   |
+| `--inner-box-shadow`     | Box shadow of the item inner     |
+| `--inner-padding-bottom` | Bottom padding of the item inner |
+| `--inner-padding-end`    | End padding of the item inner    |
+| `--inner-padding-start`  | Start padding of the item inner  |
+| `--inner-padding-top`    | Top padding of the item inner    |
+| `--min-height`           | Minimum height of the item       |
+| `--padding-bottom`       | Bottom padding of the item       |
+| `--padding-end`          | End padding of the item          |
+| `--padding-start`        | Start padding of the item        |
+| `--padding-top`          | Top padding of the item          |
+| `--transition`           | Transition of the item           |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*