@ptcwebops/ptcw-design 0.1.5 → 0.1.7

package/dist/cjs/icon-asset_5.cjs.entry.js

@@ -89,7 +89,7 @@ const PtcAnnouncement = class {
 };
 PtcAnnouncement.style = ptcAnnouncementCss;
 
-const ptcButtonCss = "button:disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-primary-uigrey);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;cursor:pointer;padding:9.4px 17.5px;border-radius:3px}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-size:var(--ptc-font-size-small);font-weight:bold;line-height:0.86}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(285deg, var(--color-primary-uigrey) 155%, #6e717c 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px #5bb73b;background-image:linear-gradient(285deg, #5bb73b 155%, #178642 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5)}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-primary-uigrey)}.legacy-green{box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-secondary-tutlegreen-dark);background-image:linear-gradient(to right, var(--color-secondary-turtlegreen), var(--color-secondary-tutlegreen-dark))}@media screen and (min-width: 768px){.legacy-green{padding:20px 20px}}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-secondary-tutlegreen-dark), var(--color-secondary-turtlegreen));opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1);border-radius:2px}.legacy-green:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-medium)}@media screen and (min-width: 768px){.legacy-green span{font-size:19px;letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}a{border-style:solid;border-width:1px;position:relative;text-decoration:none;padding:9.4px 17.5px;border-radius:3px;text-decoration:none;display:inline-block;outline:none;position:relative}a.animation-right ::slotted([slot=slot-after-text]),a.animation-right ::slotted([slot=slot-before-text]),a.animation-down ::slotted([slot=slot-after-text]),a.animation-down ::slotted([slot=slot-before-text]){transition:all ease-out 0.25s;position:relative;display:inline-block;margin-left:5px}a:hover.animation-right ::slotted([slot=slot-after-text]),a:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}a:hover.animation-down ::slotted([slot=slot-after-text]),a:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}";
+const ptcButtonCss = "button:disabled{pointer-events:none;opacity:0.6}button{background-color:var(--color-primary-uigrey);display:inline-block;border-style:solid;border-width:1px;white-space:normal;position:relative;text-decoration:none;cursor:pointer;padding:9.4px 17.5px;border-radius:3px}button.animation-right ::slotted([slot=slot-after-text]),button.animation-right ::slotted([slot=slot-before-text]),button.animation-down ::slotted([slot=slot-after-text]),button.animation-down ::slotted([slot=slot-before-text]){transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);position:relative;display:inline-block}button:hover.animation-right ::slotted([slot=slot-after-text]),button:hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}button:hover.animation-down ::slotted([slot=slot-after-text]),button:hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}button span{font-size:var(--ptc-font-size-small);font-weight:bold;line-height:0.86}.icon-left ::slotted([slot=slot-before-text]){margin-right:var(--ptc-element-spacing-01)}.icon-right ::slotted([slot=slot-after-text]){margin-left:var(--ptc-element-spacing-01)}.blackgrey{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(285deg, var(--color-primary-uigrey) 155%, #6e717c 62%)}.blackgrey:hover{box-shadow:var(--ptc-shadow-x-large)}.blackgrey span{color:var(--color-white)}.turtlegreen{box-shadow:var(--ptc-shadow-x-small);border:solid 1px #5bb73b;background-image:linear-gradient(285deg, #5bb73b 155%, #178642 62%)}.turtlegreen:hover{box-shadow:var(--ptc-shadow-x-large)}.turtlegreen span{color:var(--color-white)}.offwhite{box-shadow:var(--ptc-shadow-x-small);border:solid 1px var(--color-primary-uigrey);background-image:linear-gradient(to right, #ffffff, #d3d3d3, #e5e5e5)}.offwhite:hover{box-shadow:var(--ptc-shadow-x-large)}.offwhite span{color:var(--color-primary-uigrey)}.legacy-green{box-shadow:0 0 25.8px 3.2px rgba(0, 0, 0, 0.5);border:solid 2.5px var(--color-secondary-tutlegreen-dark);background-image:linear-gradient(to right, var(--color-secondary-turtlegreen), var(--color-secondary-tutlegreen-dark))}@media screen and (min-width: 768px){.legacy-green{padding:20px 20px}}.legacy-green:after{position:absolute;content:\"\";top:-1px;left:0;bottom:0;right:0;width:100%;height:103%;background-image:linear-gradient(to right, var(--color-secondary-tutlegreen-dark), var(--color-secondary-turtlegreen));opacity:0;transition:opacity 0.6s cubic-bezier(0, 0, 0.23, 1);border-radius:2px}.legacy-green:hover{box-shadow:0 0 49px 6.1px rgba(0, 0, 0, 0.55)}.legacy-green:hover span{color:var(--color-white)}.legacy-green:hover:after{opacity:1}.legacy-green span{font-family:var(--ptc-font-secondary-latin);color:var(--color-white);z-index:100;position:relative;text-transform:uppercase;font-weight:var(--ptc-font-weight-bold);letter-spacing:var(--ptc-letter-spacing-normal);font-size:var(--ptc-font-size-medium)}@media screen and (min-width: 768px){.legacy-green span{font-size:19px;letter-spacing:var(--ptc-letter-spacing-loose)}}.legacy-green icon-asset{display:inline}:host(a){border-style:solid;border-width:1px;position:relative;text-decoration:none;padding:9.4px 17.5px;border-radius:3px;text-decoration:none;display:inline-block;outline:none;position:relative}:host(a).animation-right ::slotted([slot=slot-after-text]),:host(a).animation-right ::slotted([slot=slot-before-text]),:host(a).animation-down ::slotted([slot=slot-after-text]),:host(a).animation-down ::slotted([slot=slot-before-text]){transition:all ease-out 0.25s;position:relative;display:inline-block;margin-left:5px}:host(a):hover.animation-right ::slotted([slot=slot-after-text]),:host(a):hover.animation-right ::slotted([slot=slot-before-text]){transform:translateX(var(--ptc-element-spacing-02))}:host(a):hover.animation-down ::slotted([slot=slot-after-text]),:host(a):hover.animation-down ::slotted([slot=slot-before-text]){transform:translateY(var(--ptc-element-spacing-02))}.nav{background-color:#323b42;border-radius:var(--ptc-border-radius-medium);border:1px solid var(--color-white);border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:13px;font-stretch:100%;font-weight:var(--ptc-font-weight-bold);line-height:26px;list-style:none;padding:3px var(--ptc-element-spacing-04);position:relative;text-align:center;text-decoration:none;transition:background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.nav:hover{background-color:#20262a}";
 
 const PtcButton = class {
   constructor(hostRef) {
@@ -126,12 +126,12 @@ const PtcButton = class {
   }
   clickEventHandler() {
     this.clickEvent.emit();
-    console.log('click!');
+    //console.log('click!');
   }
   render() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.linkHref ? 'a' : 'button';
-    return (index.h(index.Host, null, index.h(Tag, Object.assign({ class: classMap, disabled: this.disabled, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {})), index.h("span", null, index.h("slot", { name: "slot-before-text" }), index.h("slot", null), index.h("slot", { name: "slot-after-text" })))));
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h(Tag, Object.assign({ class: classMap, disabled: this.disabled, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {})), index.h("span", null, index.h("slot", { name: "slot-before-text" }), index.h("slot", null), index.h("slot", { name: "slot-after-text" })))));
   }
   getCssClassMap() {
     return {

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-avatar.cjs",[[1,"ptc-avatar"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-picture.cjs",[[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"oldSrc":[32]},[[9,"resize","WindowResize"]]]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-avatar.cjs",[[1,"ptc-avatar"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-picture.cjs",[[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"styles":[1],"oldSrc":[32]},[[9,"resize","WindowResize"]]]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1],"styles":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
   });
 };
 

package/dist/cjs/ptc-link.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ac192914.js');
 
-const ptcLinkCss = ".disabled{pointer-events:none;cursor:default;text-decoration:none}.ptc-link{display:inline-block;color:var(--color-primary-uigrey);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}.simple::after{content:\"\";position:absolute;width:100%;left:0px;bottom:2px;transition:opacity var(--ptc-transition-fast) var(--ptc-standard-ease);border-bottom:2px solid var(--color-primary-green);opacity:0}.simple:hover.simple::after{opacity:1}.arrow{margin-right:var(--ptc-element-spacing-01)}.arrow::after{position:absolute;display:block;content:\"\";width:var(--ptc-element-spacing-06);border-bottom:2px solid var(--color-primary-green);bottom:1px;transition:width var(--ptc-transition-fast) var(--ptc-standard-ease)}.arrow:hover.arrow::after{width:100%}.uppercase{text-transform:uppercase}.small{font-size:var(--ptc-font-size-small)}.medium{font-size:var(--ptc-font-size-medium)}.large{font-size:var(--ptc-font-size-large)}icon-asset{position:absolute;right:-25px;transition:transform var(--ptc-transition-fast) var(--ptc-standard-ease)}icon-asset svg{fill:var(--color-primary-green) !important}.ptc-link:hover.arrow icon-asset{transform:translateX(var(--ptc-element-spacing-04))}.nav-title{font-size:17px;line-height:var(--ptc-line-height-dense);letter-spacing:var(--ptc-element-spacing-01);color:#cac8c8;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);font-weight:var(--ptc-font-weight-semibold)}.primary-nav-link{display:inline-block;position:relative;font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-normal);font-weight:var(--ptc-font-weight-bold);color:var(--color-white);transition:color var(--ptc-transition-slow) ease;padding:var(--ptc-element-spacing-04) 50px;background-color:transparent;text-decoration:none;outline:none}.primary-nav-link:hover{color:var(--color-secondary-turtlegreen);text-decoration:none;outline:none;background-color:transparent}.nav-title-link{font-family:var(--ptc-font-secondary-latin);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:1.56;color:var(--color-white);text-decoration:none;outline:none;background-color:transparent;transition:color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent}.nav-title-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-secondary-turtlegreen)}.secondary-nav-link{display:inline-block;position:relative;font-size:var(--ptc-font-size-x-small);line-height:20px;font-weight:var(--ptc-font-weight-light);color:var(--color-white);transition:color var(--ptc-transition-slow) ease;padding:10px 15px;background-color:transparent;text-decoration:none;outline:none}.secondary-nav-link:hover{color:var(--color-secondary-turtlegreen);text-decoration:none;outline:none;background-color:transparent}.footer-nav-link{color:var(--color-white);transition:border var(--ptc-transition-medium) var(--ptc-standard-ease), color var(--ptc-transition-medium) var(--ptc-standard-ease);border-bottom:1px solid transparent;outline:none;text-decoration:none;font-weight:var(--ptc-font-weight-semibold);line-height:1.73;letter-spacing:1.13px;text-align:left;font-size:15px}.footer-nav-link:hover{outline:none;text-decoration:none;border-bottom:0.1rem solid var(--color-secondary-turtlegreen);color:var(--color-secondary-turtlegreen)}.copyright-link{color:var(--color-white);font-size:13px;font-weight:var(--ptc-font-weight-normal);line-height:2;display:inline-block}";
+const ptcLinkCss = ":host{display:block}.disabled{pointer-events:none;cursor:default;text-decoration:none}.ptc-link{display:inline-block;color:var(--color-primary-uigrey);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}.simple::after{content:\"\";position:absolute;width:100%;left:0px;bottom:2px;transition:opacity var(--ptc-transition-fast) var(--ptc-standard-ease);border-bottom:2px solid var(--color-primary-green);opacity:0}.simple:hover.simple::after{opacity:1}.arrow{margin-right:var(--ptc-element-spacing-01)}.arrow::after{position:absolute;display:block;content:\"\";width:var(--ptc-element-spacing-06);border-bottom:2px solid var(--color-primary-green);bottom:1px;transition:width var(--ptc-transition-fast) var(--ptc-standard-ease)}.arrow:hover.arrow::after{width:100%}.uppercase{text-transform:uppercase}.small{font-size:var(--ptc-font-size-small)}.medium{font-size:var(--ptc-font-size-medium)}.large{font-size:var(--ptc-font-size-large)}icon-asset{position:absolute;right:-25px;transition:transform var(--ptc-transition-fast) var(--ptc-standard-ease)}icon-asset svg{fill:var(--color-primary-green) !important}.ptc-link:hover.arrow icon-asset{transform:translateX(var(--ptc-element-spacing-04))}.nav-title{box-sizing:border-box;color:var(--color-white);display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.15px;line-height:25.05px;list-style:none;margin-bottom:10px;text-align:left}.primary-nav-link{background-color:transparent;box-sizing:border-box;color:#f3f3f4;display:inline-block;font-size:15px;font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);letter-spacing:0.3px;line-height:25.95px;list-style:none;margin:var(--ptc-element-spacing-01) var(--ptc-element-spacing-03);padding:var(--ptc-element-spacing-02) var(--ptc-element-spacing-05);padding-bottom:7px;position:relative;text-decoration:none;transition:all var(--ptc-transition-medium) var(--ptc-decelerated-ease)}.primary-nav-link:hover{border-radius:4px;background-color:#20262a;text-decoration:none;outline:none}.nav-title-link{background-color:transparent;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-weight:var(--ptc-font-weight-extrabold);line-height:15px;list-style:none;text-align:left;text-decoration-color:var(--color-white);text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;display:inline-block}.nav-title-link:hover{color:var(--color-white);border-bottom:1.5px solid var(--color-secondary-turtlegreen)}.secondary-nav-link{display:inline-block;background-color:transparent;border-radius:4px;box-sizing:border-box;color:var(--color-white);font-size:var(--ptc-font-size-x-small);font-stretch:100%;font-style:normal;font-weight:var(--ptc-font-weight-semibold);letter-spacing:0.12px;line-height:14.4px;list-style:none;margin-bottom:12px;text-align:left;text-decoration:none;transition:border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);border-bottom:1.5px solid transparent;white-space:nowrap}.secondary-nav-link:hover{color:var(--color-white);border-bottom:1.5px solid #74c34d;border-radius:0;text-decoration:none}.footer-nav-link{color:var(--color-white);transition:border var(--ptc-transition-medium) var(--ptc-standard-ease), color var(--ptc-transition-medium) var(--ptc-standard-ease);border-bottom:1px solid transparent;outline:none;text-decoration:none;font-weight:var(--ptc-font-weight-semibold);line-height:1.73;letter-spacing:1.13px;text-align:left;font-size:15px}.footer-nav-link:hover{outline:none;text-decoration:none;border-bottom:0.1rem solid var(--color-secondary-turtlegreen);color:var(--color-secondary-turtlegreen)}.copyright-link{color:var(--color-white);font-size:13px;font-weight:var(--ptc-font-weight-normal);line-height:2;display:inline-block}";
 
 const PtcLink = class {
   constructor(hostRef) {

package/dist/cjs/ptc-picture.cjs.entry.js

@@ -5,11 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ac192914.js');
 const interfaces = require('./interfaces-0ecd8027.js');
 
-const ptcPictureCss = ":host{display:block;overflow:hidden}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}";
+const ptcPictureCss = ":host{display:block;overflow:hidden}img{max-width:100%;height:auto}.cover{object-fit:cover}.fill{object-fit:fill}.contain{object-fit:contain}.scale-down{object-fit:scale-down}.none{object-fit:none}.initial{object-fit:initial}.inherit{object-fit:inherit}";
 
 const PtcPicture = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Image alt
+     */
+    this.alt = "image";
     /**
      * Image size for smallest screen
      * <=767px
@@ -34,16 +38,6 @@ const PtcPicture = class {
      * Image border shape
      */
     this.borderRadius = '';
-    /**
-     * Set height
-     * Width will be auto by default
-     */
-    this.height = 'auto';
-    /**
-     * Set Width
-     * height will be 100% by default
-     */
-    this.width = '100%';
     /**
      * Object Fit
      * Default: cover
@@ -96,8 +90,6 @@ const PtcPicture = class {
   setResponsiveBg() {
     // Define local variables
     let backgrounds = (this.el.shadowRoot || document).querySelectorAll('img'), el, elData, currentBreakpoint = this.getCurrentBreakPoints();
-    //console.log('current breakpoint: ' + currentBreakpoint);
-    // Loop through all target elements
     for (var i = 0, len = backgrounds.length; i < len; i++) {
       // Set current variables
       el = backgrounds[i];
@@ -115,7 +107,7 @@ const PtcPicture = class {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, null, index.h("style", null, `img{width:${this.width};height:${this.height};}`), index.h("img", { class: classMap, "data-xs": `${this.src}:${this.sizeXs}`, "data-sm": `${this.src}:${this.sizeSm}`, "data-md": `${this.src}:${this.sizeMd}`, "data-lg": `${this.src}:${this.sizeLg}`, alt: this.alt })));
+    return (index.h(index.Host, null, this.styles && index.h("style", null, this.styles), index.h("img", Object.assign({ class: classMap, "data-xs": `${this.src}:${this.sizeXs}`, "data-sm": `${this.src}:${this.sizeSm}`, "data-md": `${this.src}:${this.sizeMd}`, "data-lg": `${this.src}:${this.sizeLg}` }, (!!this.width ? { width: this.width } : {}), (!!this.height ? { height: this.height } : {}), { alt: this.alt }))));
   }
   getCurrentBreakPoints() {
     // Define local variables

package/dist/cjs/ptcw-design.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-avatar.cjs",[[1,"ptc-avatar"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-picture.cjs",[[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"oldSrc":[32]},[[9,"resize","WindowResize"]]]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
+  return index.bootstrapLazy([["ptc-card.cjs",[[1,"ptc-card",{"cardType":[1,"card-type"],"cardHref":[1,"card-href"],"target":[1],"rel":[1],"hasImage":[4,"has-image"],"hasVideo":[4,"has-video"],"hasLottie":[4,"has-lottie"],"heading":[1],"cardDate":[1,"card-date"],"styles":[1]}]]],["ptc-link.cjs",[[1,"ptc-link",{"disabled":[516],"external":[516],"href":[1],"target":[1],"linkTitle":[1,"link-title"],"theme":[1],"uppercase":[4],"fontSize":[1,"font-size"]}]]],["ptc-lottie.cjs",[[1,"ptc-lottie",{"jsonSrc":[1025,"json-src"],"speed":[1026]}]]],["list-item.cjs",[[4,"list-item",{"listType":[1,"list-type"],"linkHref":[1,"link-href"]}]]],["my-component.cjs",[[1,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["ptc-avatar.cjs",[[1,"ptc-avatar"]]],["ptc-footer.cjs",[[1,"ptc-footer"]]],["ptc-img.cjs",[[0,"ptc-img",{"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"imgUrl":[1,"img-url"],"imageType":[1,"image-type"],"borderRadius":[1,"border-radius"],"loadMode":[1,"load-mode"]},[[9,"resize","WindowResize"]]]]],["ptc-list.cjs",[[0,"ptc-list",{"listType":[1,"list-type"],"listItems":[16]}]]],["ptc-nav.cjs",[[1,"ptc-nav"]]],["ptc-nav-item.cjs",[[1,"ptc-nav-item",{"url":[1025],"label":[1025],"ariaExpanded":[1028,"aria-expanded"],"depth":[1538],"hasChildren":[1028,"has-children"],"parentExpanded":[1540,"parent-expanded"],"navType":[1,"nav-type"]},[[0,"handleClick","handleClick"],[9,"resize","handleResize"]]]]],["ptc-overlay.cjs",[[4,"ptc-overlay"]]],["ptc-picture.cjs",[[1,"ptc-picture",{"src":[1],"alt":[1],"sizeXs":[1025,"size-xs"],"sizeSm":[1025,"size-sm"],"sizeMd":[1025,"size-md"],"sizeLg":[1025,"size-lg"],"borderRadius":[1,"border-radius"],"height":[1],"width":[1],"objectFit":[1,"object-fit"],"styles":[1],"oldSrc":[32]},[[9,"resize","WindowResize"]]]]],["ptc-spacer.cjs",[[1,"ptc-spacer",{"breakpoint":[1],"size":[1],"direction":[1]}]]],["ptc-span.cjs",[[1,"ptc-span",{"spanStyle":[1,"span-style"],"display":[1],"styles":[1]}]]],["ptc-title.cjs",[[1,"ptc-title",{"type":[1],"textAlign":[1,"text-align"],"upperline":[1]}]]],["lottie-player.cjs",[[1,"lottie-player",{"mode":[1],"autoplay":[4],"background":[513],"controls":[4],"count":[2],"direction":[2],"hover":[4],"loop":[516],"renderer":[1],"speed":[2],"src":[1],"currentState":[1,"current-state"],"seeker":[8],"intermission":[2],"play":[64],"pause":[64],"stop":[64],"seek":[64],"getLottie":[64],"setSpeed":[64],"setDirection":[64],"setLooping":[64],"togglePlay":[64],"toggleLooping":[64]}]]],["ptc-date.cjs",[[1,"ptc-date",{"year":[2],"month":[2],"day":[2],"country":[1],"dateString":[1,"date-string"],"dateStyles":[1,"date-styles"]}]]],["icon-asset_5.cjs",[[1,"ptc-announcement",{"btnText":[513,"btn-text"],"visible":[1540],"btnLink":[513,"btn-link"],"tempContainer":[4,"temp-container"]}],[1,"ptc-para",{"fontSize":[1,"font-size"],"fontWeight":[1,"font-weight"],"paraStyle":[1,"para-style"],"paraMargin":[1,"para-margin"]}],[1,"ptc-button",{"disabled":[516],"type":[1],"color":[1],"iconAnimation":[1,"icon-animation"],"iconPosition":[1,"icon-position"],"linkHref":[1,"link-href"],"target":[1],"rel":[1],"styles":[1]}],[1,"ptc-svg-btn",{"svgName":[1,"svg-name"]}],[0,"icon-asset",{"name":[1],"size":[1],"type":[1],"spin":[1],"pulse":[1],"color":[1]}]]]], options);
 });

package/dist/collection/components/icon-asset/assets/ptc-sprite.svg

@@ -141,4 +141,99 @@
       </g>
     </g>
   </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" id="new-search">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <g id="Layer_2-2">
+          <g id="Layer_1-2-2">
+            <g>
+              <g id="Group_1342">
+                <path id="Path_4263" d="M14.1,12.46l5.45,5.46-1.63,1.63L12.46,14.1v-.85l-.29-.31a7.11,7.11,0,1,1,.76-.76l.32.28Zm-6.55,0A4.91,4.91,0,1,0,2.63,7.55h0a4.91,4.91,0,0,0,4.9,4.91h0"></path>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.83 47.62" id="arrow-right-nav">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <path id="Path_4266" d="M0,30.77H32.61V47.62L57.83,24,32.61,0V17.26H0Z"></path>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77.6 89.6" id="windchil-icon-logo-1">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <polygon points="54.5 28.88 54.5 9.06 38.8 0 21.65 9.9 54.5 28.88"></polygon>
+        <polygon points="60.44 50.45 77.6 40.54 77.6 22.4 60.44 12.49 60.44 50.45"></polygon>
+        <polygon points="23.09 60.78 23.09 80.55 38.8 89.61 55.91 79.74 23.09 60.78"></polygon>
+        <polygon points="44.71 66.4 61.85 76.3 77.6 67.2 77.6 47.4 44.71 66.4"></polygon>
+        <polygon points="32.84 23.23 15.71 13.33 0 22.4 0 42.21 32.84 23.23"></polygon>
+        <polygon points="17.16 39.15 0 49.07 0 67.2 17.16 77.11 17.16 39.15"></polygon>
+        <polygon points="54.5 53.87 38.8 62.94 23.09 53.87 23.09 35.74 38.8 26.67 54.5 35.74 54.5 53.87"></polygon>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.95 88.78" id="vuforia-icon-logo-1">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <path id="Path_4275" d="M38.54,63.26,71.23,44.39,38.45,25.53,5.82,44.39Z"></path>
+        <path id="Path_4276" d="M38.25,0,0,22.35V40.94L38.44,18.71l38.5,22.16V22.33Z"></path>
+        <path id="Path_4277" d="M0,66.45,38.69,88.78,77,66.43V47.91L38.55,70.08,0,47.85Z"></path>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72.06 83.21" id="thingworx-icon-logo-1">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <polygon points="41.56 41.6 72.06 59.2 72.06 24 41.56 41.6"></polygon>
+        <polygon points="36.01 38.4 69.28 19.2 36.03 0 2.75 19.21 36.01 38.4"></polygon>
+        <polygon points="30.45 41.6 0 24.03 0 59.18 30.45 41.6"></polygon>
+        <polygon points="36.01 44.81 2.76 64 36.03 83.21 69.29 64.01 36.01 44.81"></polygon>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.53 81.35" id="onshape-icon-logo-1">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <polygon points="13.92 27.93 48.65 7.82 35.08 0 0 20.27 0 38.41 13.92 46.67 13.92 27.93"></polygon>
+        <polygon points="0 44.37 0 60.99 35.27 81.35 50.71 72.45 50.71 55.42 35.1 65.59 0 44.37"></polygon>
+        <polygon points="54.05 10.94 39.55 19.36 55.96 28.82 55.93 69.42 70.53 60.99 70.53 20.38 54.05 10.94"></polygon>
+        <polygon points="25.18 34.64 40.46 25.79 34.52 22.36 19.08 31.28 19.08 39.23 25.18 42.81 25.18 34.64"></polygon>
+        <polygon points="35.09 52.18 19.08 42.44 19.08 49.72 35.09 59.33 41.67 55.27 41.67 47.96 35.09 52.18"></polygon>
+        <polygon points="37.02 31.24 44.33 35.46 44.32 53.59 50.71 49.55 50.71 31.71 43.43 27.52 37.02 31.24"></polygon>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.37 85.37" id="creo-icon-logo-1">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <polygon points="37.7 40.16 72.48 20.1 37.7 0 2.9 20.1 37.7 40.16"></polygon>
+        <polygon points="34.81 45.13 0 25.07 0 65.27 34.81 85.37 34.81 45.13"></polygon>
+        <polygon points="40.56 45.13 40.56 85.37 75.37 65.27 75.37 25.04 40.56 45.13"></polygon>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.21 83.67" id="arena-icon-logo1">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <path id="Path_4334" d="M60.26,25.14l9.51-5.5L35.85,0,13.4,13.48,22.9,19l12.94-8Z"></path>
+        <path id="Path_4335" d="M22.77,76.11v-11l-13.25-8V32.25L0,26.76V62.61Z"></path>
+        <path id="Path_4336" d="M56.35,48.39l0,9.72L36,69.78V83.67l-8.89-5.5V64.92Z"></path>
+        <path id="Path_4337" d="M22.77,59.94l-8.62-5.11,0-25L0,21.5l9-5.43,13.73,8Z"></path>
+        <path id="Path_4338" d="M70.21,24.37l-.09,11.49-9.56,5.5L26.86,21.84l9.35-5.61L60.27,30.07Z"></path>
+        <path id="Path_4339" d="M40.37,83.62,70.21,66.49V40.65L60.7,46.08V61.31L40.36,73Z"></path>
+      </g>
+    </g>
+  </symbol>
 </svg>

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

@@ -15,15 +15,19 @@ button {
   padding: 9.4px 17.5px;
   border-radius: 3px;
 }
-button.animation-right ::slotted([slot=slot-after-text]), button.animation-right ::slotted([slot=slot-before-text]), button.animation-down ::slotted([slot=slot-after-text]), button.animation-down ::slotted([slot=slot-before-text]) {
+button.animation-right ::slotted([slot=slot-after-text]),
+button.animation-right ::slotted([slot=slot-before-text]), button.animation-down ::slotted([slot=slot-after-text]),
+button.animation-down ::slotted([slot=slot-before-text]) {
   transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
   position: relative;
   display: inline-block;
 }
-button:hover.animation-right ::slotted([slot=slot-after-text]), button:hover.animation-right ::slotted([slot=slot-before-text]) {
+button:hover.animation-right ::slotted([slot=slot-after-text]),
+button:hover.animation-right ::slotted([slot=slot-before-text]) {
   transform: translateX(var(--ptc-element-spacing-02));
 }
-button:hover.animation-down ::slotted([slot=slot-after-text]), button:hover.animation-down ::slotted([slot=slot-before-text]) {
+button:hover.animation-down ::slotted([slot=slot-after-text]),
+button:hover.animation-down ::slotted([slot=slot-before-text]) {
   transform: translateY(var(--ptc-element-spacing-02));
 }
 button span {
@@ -129,7 +133,7 @@ button span {
   display: inline;
 }
 
-a {
+:host(a) {
   border-style: solid;
   border-width: 1px;
   position: relative;
@@ -141,15 +145,43 @@ a {
   outline: none;
   position: relative;
 }
-a.animation-right ::slotted([slot=slot-after-text]), a.animation-right ::slotted([slot=slot-before-text]), a.animation-down ::slotted([slot=slot-after-text]), a.animation-down ::slotted([slot=slot-before-text]) {
+:host(a).animation-right ::slotted([slot=slot-after-text]),
+:host(a).animation-right ::slotted([slot=slot-before-text]), :host(a).animation-down ::slotted([slot=slot-after-text]),
+:host(a).animation-down ::slotted([slot=slot-before-text]) {
   transition: all ease-out 0.25s;
   position: relative;
   display: inline-block;
   margin-left: 5px;
 }
-a:hover.animation-right ::slotted([slot=slot-after-text]), a:hover.animation-right ::slotted([slot=slot-before-text]) {
+:host(a):hover.animation-right ::slotted([slot=slot-after-text]),
+:host(a):hover.animation-right ::slotted([slot=slot-before-text]) {
   transform: translateX(var(--ptc-element-spacing-02));
 }
-a:hover.animation-down ::slotted([slot=slot-after-text]), a:hover.animation-down ::slotted([slot=slot-before-text]) {
+:host(a):hover.animation-down ::slotted([slot=slot-after-text]),
+:host(a):hover.animation-down ::slotted([slot=slot-before-text]) {
   transform: translateY(var(--ptc-element-spacing-02));
+}
+
+.nav {
+  background-color: #323b42;
+  border-radius: var(--ptc-border-radius-medium);
+  border: 1px solid var(--color-white);
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  box-sizing: border-box;
+  color: var(--color-white);
+  display: inline-block;
+  font-size: 13px;
+  font-stretch: 100%;
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: 26px;
+  list-style: none;
+  padding: 3px var(--ptc-element-spacing-04);
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: background-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);
+}
+.nav:hover {
+  background-color: #20262a;
 }

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

@@ -32,12 +32,13 @@ export class PtcButton {
   }
   clickEventHandler() {
     this.clickEvent.emit();
-    console.log('click!');
+    //console.log('click!');
   }
   render() {
     const classMap = this.getCssClassMap();
     const Tag = !!this.linkHref ? 'a' : 'button';
     return (h(Host, null,
+      this.styles && h("style", null, this.styles),
       h(Tag, Object.assign({ class: classMap, disabled: this.disabled, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {})),
         h("span", null,
           h("slot", { name: "slot-before-text" }),
@@ -99,8 +100,8 @@ export class PtcButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'offwhite' | 'blackgrey' | 'turtlegreen' | 'neon' | 'legacy-green'",
-        "resolved": "\"blackgrey\" | \"legacy-green\" | \"neon\" | \"offwhite\" | \"turtlegreen\"",
+        "original": "'offwhite' | 'blackgrey' | 'turtlegreen' | 'nav' | 'legacy-green'",
+        "resolved": "\"blackgrey\" | \"legacy-green\" | \"nav\" | \"offwhite\" | \"turtlegreen\"",
         "references": {}
       },
       "required": false,
@@ -202,6 +203,23 @@ export class PtcButton {
       "attribute": "rel",
       "reflect": false,
       "defaultValue": "undefined"
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Injected CSS Styles"
+      },
+      "attribute": "styles",
+      "reflect": false
     }
   }; }
   static get events() { return [{

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

@@ -1,3 +1,7 @@
+:host {
+  display: block;
+}
+
 .disabled {
   pointer-events: none;
   cursor: default;
@@ -75,45 +79,59 @@ icon-asset svg {
 }
 
 .nav-title {
-  font-size: 17px;
-  line-height: var(--ptc-line-height-dense);
-  letter-spacing: var(--ptc-element-spacing-01);
-  color: #cac8c8;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-  font-weight: var(--ptc-font-weight-semibold);
+  box-sizing: border-box;
+  color: var(--color-white);
+  display: inline-block;
+  font-size: 15px;
+  font-stretch: 100%;
+  font-weight: var(--ptc-font-weight-extrabold);
+  letter-spacing: 0.15px;
+  line-height: 25.05px;
+  list-style: none;
+  margin-bottom: 10px;
+  text-align: left;
 }
 
 .primary-nav-link {
+  background-color: transparent;
+  box-sizing: border-box;
+  color: #f3f3f4;
   display: inline-block;
+  font-size: 15px;
+  font-stretch: 100%;
+  font-weight: var(--ptc-font-weight-extrabold);
+  letter-spacing: 0.3px;
+  line-height: 25.95px;
+  list-style: none;
+  margin: var(--ptc-element-spacing-01) var(--ptc-element-spacing-03);
+  padding: var(--ptc-element-spacing-02) var(--ptc-element-spacing-05);
+  padding-bottom: 7px;
   position: relative;
-  font-size: var(--ptc-font-size-small);
-  line-height: var(--ptc-line-height-normal);
-  font-weight: var(--ptc-font-weight-bold);
-  color: var(--color-white);
-  transition: color var(--ptc-transition-slow) ease;
-  padding: var(--ptc-element-spacing-04) 50px;
-  background-color: transparent;
   text-decoration: none;
-  outline: none;
+  transition: all var(--ptc-transition-medium) var(--ptc-decelerated-ease);
 }
 .primary-nav-link:hover {
-  color: var(--color-secondary-turtlegreen);
+  border-radius: 4px;
+  background-color: #20262a;
   text-decoration: none;
   outline: none;
-  background-color: transparent;
 }
 
 .nav-title-link {
-  font-family: var(--ptc-font-secondary-latin);
-  font-size: var(--ptc-font-size-medium);
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: 1.56;
+  background-color: transparent;
+  box-sizing: border-box;
   color: var(--color-white);
+  font-size: var(--ptc-font-size-x-small);
+  font-stretch: 100%;
+  font-weight: var(--ptc-font-weight-extrabold);
+  line-height: 15px;
+  list-style: none;
+  text-align: left;
+  text-decoration-color: var(--color-white);
   text-decoration: none;
-  outline: none;
-  background-color: transparent;
-  transition: color var(--ptc-transition-medium) var(--ptc-decelerated-ease);
+  transition: border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);
   border-bottom: 1.5px solid transparent;
+  display: inline-block;
 }
 .nav-title-link:hover {
   color: var(--color-white);
@@ -122,22 +140,29 @@ icon-asset svg {
 
 .secondary-nav-link {
   display: inline-block;
-  position: relative;
-  font-size: var(--ptc-font-size-x-small);
-  line-height: 20px;
-  font-weight: var(--ptc-font-weight-light);
-  color: var(--color-white);
-  transition: color var(--ptc-transition-slow) ease;
-  padding: 10px 15px;
   background-color: transparent;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--color-white);
+  font-size: var(--ptc-font-size-x-small);
+  font-stretch: 100%;
+  font-style: normal;
+  font-weight: var(--ptc-font-weight-semibold);
+  letter-spacing: 0.12px;
+  line-height: 14.4px;
+  list-style: none;
+  margin-bottom: 12px;
+  text-align: left;
   text-decoration: none;
-  outline: none;
+  transition: border-color var(--ptc-transition-medium) var(--ptc-decelerated-ease);
+  border-bottom: 1.5px solid transparent;
+  white-space: nowrap;
 }
 .secondary-nav-link:hover {
-  color: var(--color-secondary-turtlegreen);
+  color: var(--color-white);
+  border-bottom: 1.5px solid #74c34d;
+  border-radius: 0;
   text-decoration: none;
-  outline: none;
-  background-color: transparent;
 }
 
 .footer-nav-link {

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

@@ -3,6 +3,11 @@
   overflow: hidden;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 .cover {
   object-fit: cover;
 }