@ptcwebops/ptcw-design 0.2.8 → 0.2.9

package/dist/collection/components/ptc-card-content/ptc-card-content.css

@@ -0,0 +1,61 @@
+:host {
+  display: block;
+}
+
+:host(.speed-bump) {
+  border: 1px solid #6a6a6a;
+  border-radius: 12px;
+  padding: var(--ptc-element-spacing-06) var(--ptc-element-spacing-06);
+  text-align: center;
+}
+
+@media screen and (min-width: 768px) {
+  :host(.speed-bump) {
+    text-align: left;
+  }
+}
+:host(.card-tall) .ptc-card-content-wrapper,
+:host(.card-video) .ptc-card-content-wrapper,
+:host(.card-wide) .ptc-card-content-wrapper {
+  border-radius: var(--ptc-border-radius-x-large);
+  position: relative;
+}
+:host(.card-tall) .ptc-card-content-wrapper::before,
+:host(.card-video) .ptc-card-content-wrapper::before,
+:host(.card-wide) .ptc-card-content-wrapper::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 97.5%;
+  border-radius: var(--ptc-border-radius-x-large);
+  top: 0;
+  left: 0;
+  background: transparent;
+  z-index: 1;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
+  transition: background var(--ptc-transition-medium) var(--ptc-acceletated-ease);
+}
+:host(.card-tall) .ptc-card-content-wrapper::after,
+:host(.card-video) .ptc-card-content-wrapper::after,
+:host(.card-wide) .ptc-card-content-wrapper::after {
+  content: url("data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+  position: absolute;
+  opacity: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  transition: opacity var(--ptc-transition-medium) var(--ptc-acceletated-ease);
+}
+
+:host(.mouse-hover) .ptc-card-content-wrapper::before {
+  background: rgba(0, 0, 0, 0.6);
+}
+:host(.mouse-hover) .ptc-card-content-wrapper::after {
+  opacity: 1;
+}
+
+:host(.card-tall) .ptc-card-content-wrapper::before,
+:host(.card-wide) .ptc-card-content-wrapper::before {
+  height: 100%;
+}

package/dist/collection/components/ptc-card-content/ptc-card-content.js

@@ -0,0 +1,81 @@
+import { Component, Host, h, Prop, Event, Element } from '@stencil/core';
+export class PtcCardContent {
+  hoverEventHandler() {
+    this.hoverEvent.emit();
+    this.el.classList.add('mouse-hover');
+  }
+  leaveEventHandler() {
+    this.hoverEvent.emit();
+    this.el.classList.remove('mouse-hover');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) },
+      h("div", { class: "ptc-card-content-wrapper" },
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: !!this.cardType ? true : false,
+    };
+  }
+  static get is() { return "ptc-card-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-card-content.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-card-content.css"]
+  }; }
+  static get properties() { return {
+    "cardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'speed-bump'",
+        "resolved": "\"card-2up\" | \"card-tall\" | \"card-video\" | \"card-wide\" | \"speed-bump\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-type",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "hoverEvent",
+      "name": "hoverEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "leaveEvent",
+      "name": "leaveEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-card-plm/ptc-card-plm.css

@@ -0,0 +1,19 @@
+:host {
+  display: block;
+}
+
+:host(.card-tall),
+:host(.card-wide),
+:host(.card-video) {
+  position: relative;
+}
+:host(.card-tall) a,
+:host(.card-wide) a,
+:host(.card-video) a {
+  text-decoration: none;
+}
+:host(.card-tall) a:hover,
+:host(.card-wide) a:hover,
+:host(.card-video) a:hover {
+  text-decoration: none;
+}

package/dist/collection/components/ptc-card-plm/ptc-card-plm.js

@@ -0,0 +1,97 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcCardPlm {
+  constructor() {
+    this.linkTarget = '_self';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.cardLink ? 'a' : 'div';
+    return (h(Host, { class: classMap },
+      h(Tag, Object.assign({}, (!!this.cardLink ? { href: this.cardLink } : {}), (!!this.linkTarget && !!this.cardLink ? { target: this.linkTarget } : {}), (!!this.cardLink ? { title: this.linkTitle ? this.linkTitle : this.cardLink } : {})),
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false
+    };
+  }
+  static get is() { return "ptc-card-plm"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-card-plm.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-card-plm.css"]
+  }; }
+  static get properties() { return {
+    "cardType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'card-video'| 'card-tall' | 'card-wide' | 'speed-bump'",
+        "resolved": "\"card-tall\" | \"card-video\" | \"card-wide\" | \"speed-bump\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-type",
+      "reflect": false
+    },
+    "cardLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "card-link",
+      "reflect": false
+    },
+    "linkTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link-title",
+      "reflect": false
+    },
+    "linkTarget": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link-target",
+      "reflect": false,
+      "defaultValue": "'_self'"
+    }
+  }; }
+}

package/dist/collection/components/ptc-hero/ptc-hero.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  position: relative;
+}
+
+:host(.jumbotron) .ptc-hero-wrapper,
+:host(.footer-cta) .ptc-hero-wrapper {
+  position: relative;
+}
+
+:host(.footer-cta) .ptc-hero-wrapper div > * {
+  text-align: center;
+}

package/dist/collection/components/ptc-hero/ptc-hero.js

@@ -0,0 +1,43 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcHero {
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("div", { class: "ptc-hero-wrapper" },
+        h("ptc-img", { "image-type": "smart-bg", "img-url": "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway", "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" },
+          this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1-xs" }), h("ptc-overlay", { "filter-color": "black-2-xs" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null,
+          h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+  static get is() { return "ptc-hero"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-hero.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-hero.css"]
+  }; }
+  static get properties() { return {
+    "heroType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'jumbotron' | 'footer-cta'",
+        "resolved": "\"footer-cta\" | \"jumbotron\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hero-type",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/ptc-img/ptc-img.js

@@ -35,13 +35,17 @@ export class PtcImg {
      */
     this.loadMode = 'lazy-bg';
   }
+  /**
+   * Image Z Index
+   */
+  // @Prop() imageZIndex: 'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2' = 'z-index-auto';
   WindowResize() {
     this.setResponsiveBg();
   }
   render() {
     const classMap = this.getCssClassMap();
     return (h(Host, null,
-      h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` })));
+      h("div", { class: classMap, "data-xs": `${this.imgUrl}:${this.sizeXs}`, "data-sm": `${this.imgUrl}:${this.sizeSm}`, "data-md": `${this.imgUrl}:${this.sizeMd}`, "data-lg": `${this.imgUrl}:${this.sizeLg}` }, this.imageType == 'smart-bg' ? h("slot", null) : null)));
   }
   componentDidLoad() {
     this.addIntersectionObserver();
@@ -107,6 +111,7 @@ export class PtcImg {
       'ptc-img': true,
       [this.borderRadius]: true,
       [this.loadMode]: true,
+      // [this.imageZIndex] : true
     };
   }
   getCurrentBreakPoints() {

package/dist/collection/components/ptc-link/ptc-link.css

@@ -14,7 +14,6 @@
   font-weight: var(--ptc-font-weight-black);
   position: relative;
   line-height: var(--ptc-line-height-normal);
-  margin-bottom: var(--ptc-element-spacing-01);
   outline: none;
   text-decoration: none;
 }
@@ -65,14 +64,22 @@
   font-size: var(--ptc-font-size-large);
 }
 
-icon-asset {
+.ptc-link.arrow icon-asset {
   position: absolute;
   right: -25px;
   transition: transform var(--ptc-transition-fast) var(--ptc-standard-ease);
 }
-icon-asset svg {
+.ptc-link.arrow icon-asset svg {
   fill: var(--color-primary-green) !important;
 }
+.ptc-link.arrow-plm icon-asset {
+  position: absolute;
+  right: -6.75px;
+  transform: translate(100%, 8%);
+}
+.ptc-link.arrow-plm svg {
+  fill: #3DAB49 !important;
+}
 
 .ptc-link:hover.arrow icon-asset {
   transform: translateX(var(--ptc-element-spacing-04));
@@ -194,4 +201,19 @@ icon-asset svg {
   font-weight: var(--ptc-font-weight-normal);
   line-height: 2;
   display: inline-block;
+}
+
+.arrow-plm {
+  color: var(--color-white);
+  font-weight: var(--ptc-font-weight-extrabold);
+  font-size: var(--ptc-font-size-medium);
+  line-height: var(--ptc-line-height-19);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-acceletated-ease);
+}
+.arrow-plm:hover {
+  text-decoration-color: #3DAB49;
 }

package/dist/collection/components/ptc-link/ptc-link.js

@@ -31,6 +31,7 @@ export class PtcLink {
     return (h(Host, null,
       h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle },
         this.theme == 'arrow' ? h("icon-asset", { type: "solid", size: "small", name: "arrow-right" }) : '',
+        this.theme == 'arrow-plm' ? h("icon-asset", { type: "ptc", size: "x-small", name: "button-arrow-right" }) : '',
         h("slot", null))));
   }
   getCssClassMap() {
@@ -143,8 +144,8 @@ export class PtcLink {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'simple' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link'",
-        "resolved": "\"arrow\" | \"copyright-link\" | \"footer-nav-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"secondary-nav-link\" | \"simple\"",
+        "original": "'simple' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm'",
+        "resolved": "\"arrow\" | \"arrow-plm\" | \"copyright-link\" | \"footer-nav-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"secondary-nav-link\" | \"simple\"",
         "references": {}
       },
       "required": false,

package/dist/collection/components/ptc-list/ptc-list.css

@@ -1,13 +1,17 @@
-ptc-list .link-primary li {
+:host {
+  display: block;
+}
+
+:host(.list-primary) li {
   font-size: var(--ptc-font-size-medium);
   line-height: var(--ptc-line-height-normal);
   letter-spacing: var(--ptc-letter-spacing-normal);
   list-style: none;
 }
-ptc-list .link-primary li:not(:last-child) {
+:host(.list-primary) li:not(:last-child) {
   margin-bottom: 0.625rem;
 }
-ptc-list .link-primary li a {
+:host(.list-primary) li a {
   color: var(--color-white);
   outline: none;
   text-decoration: none;
@@ -18,7 +22,7 @@ ptc-list .link-primary li a {
   text-transform: uppercase;
   letter-spacing: var(--ptc-letter-spacing-normal);
 }
-ptc-list .link-primary li a:hover {
+:host(.list-primary) li a:hover {
   color: var(--color-white);
   border-bottom: 1.5px solid var(--color-primary-green);
 }

package/dist/collection/components/ptc-list/ptc-list.js

@@ -1,8 +1,5 @@
 import { Component, Host, h, Prop } from '@stencil/core';
 export class PtcList {
-  constructor() {
-    this.listType = 'para-list';
-  }
   render() {
     const classMap = this.getCssClassMap();
     const listItems = this.listItems;
@@ -18,10 +15,11 @@ export class PtcList {
   }
   getCssClassMap() {
     return {
-      [this.listType]: true,
+      [this.listType]: this.listItems ? true : false,
     };
   }
   static get is() { return "ptc-list"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-list.scss"]
   }; }
@@ -33,8 +31,8 @@ export class PtcList {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'link-primary' | 'link-sub' | 'icon' | 'para-list'",
-        "resolved": "\"icon\" | \"link-primary\" | \"link-sub\" | \"para-list\"",
+        "original": "'list-primary'",
+        "resolved": "\"list-primary\"",
         "references": {}
       },
       "required": false,
@@ -44,8 +42,7 @@ export class PtcList {
         "text": ""
       },
       "attribute": "list-type",
-      "reflect": false,
-      "defaultValue": "'para-list'"
+      "reflect": false
     },
     "listItems": {
       "type": "unknown",

package/dist/collection/components/ptc-overlay/ptc-overlay.css

@@ -1,3 +1,84 @@
 :host {
   display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:host(.blue) {
+  background: linear-gradient(180deg, rgba(25, 123, 192, 0.2) 0%, #197BC0 100%);
+}
+
+:host(.red) {
+  background: linear-gradient(180deg, rgba(209, 44, 58, 0.2) 0%, #D12C3A 100%);
+}
+
+:host(.orange) {
+  background: linear-gradient(180deg, rgba(195, 119, 41, 0.2) 0%, #C37729 100%);
+}
+
+:host(.green) {
+  background: linear-gradient(180deg, rgba(0, 137, 11, 0.2) 0%, #00890B 100%);
+}
+
+:host(.black-1-sm) {
+  background: linear-gradient(270deg, rgba(32, 38, 42, 0) 33.33%, #20262A 100%);
+}
+
+:host(.black-2-sm) {
+  background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%);
+}
+
+:host(.black-1-xs) {
+  background: linear-gradient(270deg, rgba(32, 38, 42, 0.32) 33.33%, #20262A 100%);
+}
+
+:host(.black-2-xs) {
+  background: linear-gradient(180deg, rgba(32, 38, 42, 0) 0%, #20262A 100%);
+}
+
+:host(.black-3) {
+  background: linear-gradient(180deg, #20262A 0%, rgba(32, 38, 42, 0.55) 100%);
+}
+
+:host(.slate-grey) {
+  background: linear-gradient(180deg, rgba(97, 116, 128, 0.2) 0%, #617480 100%);
+}
+
+:host(.radius-sm) {
+  border-radius: var(--ptc-border-radius-small);
+}
+
+:host(.radius-md) {
+  border-radius: var(--ptc-border-radius-medium);
+}
+
+:host(.radius-lg) {
+  border-radius: var(--ptc-border-radius-large);
+}
+
+:host(.radius-x-lg) {
+  border-radius: var(--ptc-border-radius-x-large);
+}
+
+:host(.z-index-auto) {
+  z-index: auto;
+}
+
+:host(.z-index-n-1) {
+  z-index: -1;
+}
+
+:host(.z-index-n-2) {
+  z-index: -2;
+}
+
+:host(.z-index-p-1) {
+  z-index: 1;
+}
+
+:host(.z-index-p-2) {
+  z-index: 2;
 }

package/dist/collection/components/ptc-overlay/ptc-overlay.js

@@ -1,14 +1,99 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, Host, h, Prop } from '@stencil/core';
 export class PtcOverlay {
+  constructor() {
+    /**
+     * Overlay z-index
+     */
+    this.overlayZIndex = 'z-index-auto';
+  }
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    const classMap = this.getCssClassMap();
+    return h(Host, { class: classMap });
+  }
+  getCssClassMap() {
+    return {
+      [this.filterColor]: !!this.filterColor ? true : false,
+      [this.borderRadius]: !!this.borderRadius ? true : false,
+      [this.overlayZIndex]: true
+    };
   }
   static get is() { return "ptc-overlay"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["ptc-overlay.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["ptc-overlay.css"]
   }; }
+  static get properties() { return {
+    "filterColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'blue' | 'red' | 'orange' | 'green' | 'black-1-xs' | 'black-2-xs' | 'black-1-sm' | 'black-2-sm' | 'black-3' | 'slate-grey'",
+        "resolved": "\"black-1-sm\" | \"black-1-xs\" | \"black-2-sm\" | \"black-2-xs\" | \"black-3\" | \"blue\" | \"green\" | \"orange\" | \"red\" | \"slate-grey\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Filter Color"
+      },
+      "attribute": "filter-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'radius-sm' | 'radius-md' | 'radius-lg' | 'radius-x-lg'",
+        "resolved": "\"radius-lg\" | \"radius-md\" | \"radius-sm\" | \"radius-x-lg\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Overlay border shape"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "overlayZIndex": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'z-index-auto' | 'z-index-n-2' | 'z-index-n-1' | 'z-index-p-1' | 'z-index-p-2'",
+        "resolved": "\"z-index-auto\" | \"z-index-n-1\" | \"z-index-n-2\" | \"z-index-p-1\" | \"z-index-p-2\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Overlay z-index"
+      },
+      "attribute": "overlay-z-index",
+      "reflect": false,
+      "defaultValue": "'z-index-auto'"
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected Styles"
+      },
+      "attribute": "styles",
+      "reflect": false
+    }
+  }; }
 }