@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/collection/components/cards/pn-quote-card/pn-quote-card.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-quote-card .pn-quote-card__container {
   margin: 0 auto;
   display: flex;

package/collection/components/cards/pn-teaser-card/pn-teaser-card.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 .block.teasercardblock a[data-block-clickable-link=true] {
   z-index: 1;
 }

package/collection/components/cards/pn-teaser-card/pn-teaser-card.js

@@ -1,10 +1,11 @@
 import { h, Host } from "@stencil/core";
+import { HeadingTag } from "../../../globals/HeadingTag";
 export class PnTeaserCard {
     constructor() {
         this.text = null;
         this.heading = null;
         this.label = null;
-        this.headingLevel = undefined;
+        this.headingLevel = 'h3';
         this.dataCardColor = 'coral';
         this.dataCardAlignment = 'left';
         this.hasCtaSlotContent = false;
@@ -14,15 +15,10 @@ export class PnTeaserCard {
     componentWillLoad() {
         this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot="cta"]');
         this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
-        if (!this.headingLevel || isNaN(this.headingLevel)) {
-            this.headingLevel = 3;
-        }
     }
-    //render
     render() {
         const labelToCapitals = this.label?.toUpperCase();
-        const HeadingTag = `h${this.headingLevel ?? 3}`;
-        return (h(Host, { key: '25cfc8729df548f28a7577a2d0fdc3065d30e5e5' }, h("slot", { key: '834e0525865f88c787934c10e01ec6383cb91ce5', name: "clickable-block-wrapper" }), h("div", { key: 'ba3820116797f86be9db43183a64db20a91887df', class: "pn-teaser-card__container" }, h("div", { key: 'cdd17367c264860077cdf2aff76fe381b1be1e5e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '38a98a3440f3b29a1028abcaa31803d0de4dd917', name: "illustration" })), h("div", { key: '528a7a7425b031486521270ac184de4c1a34a9a0', class: "pn-teaser-card__container__content" }, h("div", { key: '7e848e8fe005a8aa9867861abc355b610150d44b', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: 'c741d9222acf8cb73f8c0060c799911d21fe26d8', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && h(HeadingTag, { key: 'c74daeb97ac60690c146832417ac394825fadef0', class: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: '0da77ddcf36cadaad9df5bfbefcb2609bc7161c8', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: '1af0c6c39adfa993abacc832c1bc8326e4f3996b', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '6bc3e69ed72ad8dc978d40f2ebb1b28bc6f2be51', name: "cta" })))))));
+        return (h(Host, { key: 'b5ee6a71383c676dff65be68bd2c583af8d4b73e' }, h("slot", { key: '26f672cccdf0b4a647608dec90d9da91d5326f2e', name: "clickable-block-wrapper" }), h("div", { key: '664a86e96d02078ad7d3b9feec848620b08a64e7', class: "pn-teaser-card__container" }, h("div", { key: 'b2690687573bc1421b4087b25574aac4e1bf210e', class: `pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}` }, h("slot", { key: '92c205f97f90b35df8f34f6905ebb5f858ba3115', name: "illustration" })), h("div", { key: 'f9b96157ea921c801f993133b0b4e7d785224a3b', class: "pn-teaser-card__container__content" }, h("div", { key: '150b6993e403a65c3d75794554b39a2c4c073099', class: "pn-teaser-card__container__content__text__container" }, labelToCapitals && h("span", { key: '20973e8c988b6f3c5bed312ad6f5e339f22565f4', class: "pn-teaser-card__container__content__text__container__label" }, labelToCapitals), this.heading && h(HeadingTag, { key: '64cdb89e6106839ef6bd7d6a6912c69bad4e1d85', level: this.headingLevel, cssClass: "pn-teaser-card__container__content__text__container__heading" }, this.heading), h("p", { key: '7366108ac28438903a71cb89e6a4d70d3e5ef96a', class: "pn-teaser-card__container__content__text__container__preamble" }, this.text)), this.hasCtaSlotContent && (h("div", { key: 'dcee0ddb4c36f90e321db3c8817b444794851b93', class: "pn-teaser-card__container__content__cta" }, h("slot", { key: '1aedb8f19e547e163676b76b502a155603c0b3ce', name: "cta" })))))));
     }
     static get is() { return "pn-teaser-card"; }
     static get originalStyleUrls() {
@@ -92,11 +88,11 @@ export class PnTeaserCard {
                 "defaultValue": "null"
             },
             "headingLevel": {
-                "type": "number",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -106,7 +102,8 @@ export class PnTeaserCard {
                     "text": ""
                 },
                 "attribute": "heading-level",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'h3'"
             },
             "dataCardColor": {
                 "type": "string",

package/collection/components/cards/pn-teaser-card/pn-teaser-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,OAAO,YAAY;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;;6BAEoB,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;IAVjC,WAAW,CAAc;IAYpC,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAErF,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,KAAK,CAAC,IAAI,CAAC,YAAmB,CAAC,EAAE,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IAED,QAAQ;IACR,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAClD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE,CAAC;QAEhD,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG;YACvC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,4DAAK,KAAK,EAAC,qDAAqD;wBAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ;wBACpH,IAAI,CAAC,OAAO,IAAI,EAAC,UAAU,qDAAC,KAAK,EAAC,8DAA8D,IAAE,IAAI,CAAC,OAAO,CAAc;wBAC7H,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF;oBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,yCAAyC;wBAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  //props\n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop() headingLevel?: number;\n  @Prop({ reflect: true }) dataCardColor: string = 'coral';\n  @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n  @State() hasCtaSlotContent: boolean = false;\n  @State() hasIllustrationSlot: boolean = true;\n\n  componentWillLoad() {\n    this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n\n    if (!this.headingLevel || isNaN(this.headingLevel as any)) {\n      this.headingLevel = 3;\n    }\n  }\n\n  //render\n  render() {\n    const labelToCapitals = this.label?.toUpperCase();\n    const HeadingTag = `h${this.headingLevel ?? 3}`;\n\n    return (\n      <Host>\n        <slot name=\"clickable-block-wrapper\" />\n        <div class=\"pn-teaser-card__container\">\n          <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n            <slot name=\"illustration\" />\n          </div>\n          <div class=\"pn-teaser-card__container__content\">\n            <div class=\"pn-teaser-card__container__content__text__container\">\n              {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n              {this.heading && <HeadingTag class=\"pn-teaser-card__container__content__text__container__heading\">{this.heading}</HeadingTag>}\n              <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n            </div>\n            {this.hasCtaSlotContent && (\n              <div class=\"pn-teaser-card__container__content__cta\">\n                <slot name=\"cta\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pn-teaser-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-teaser-card/pn-teaser-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMlD,MAAM,OAAO,YAAY;;oBAGA,IAAI;uBACD,IAAI;qBACL,IAAI;4BACG,IAAI;6BACa,OAAO;iCACH,MAAM;iCAErB,KAAK;mCACH,IAAI;;IAVjC,WAAW,CAAc;IAYpC,iBAAiB;QACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAC1E,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;IACvF,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC;QAElD,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,IAAI,EAAC,yBAAyB,GAAG;YACvC,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAE,+CAA+C,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,EAAE,EAAE;oBACnJ,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,4DAAK,KAAK,EAAC,qDAAqD;wBAC7D,eAAe,IAAI,6DAAM,KAAK,EAAC,4DAA4D,IAAE,eAAe,CAAQ;wBACpH,IAAI,CAAC,OAAO,IAAI,EAAC,UAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,8DAA8D,IACzH,IAAI,CAAC,OAAO,CACF;wBACf,0DAAG,KAAK,EAAC,+DAA+D,IAAE,IAAI,CAAC,IAAI,CAAK,CACpF;oBACL,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DAAK,KAAK,EAAC,yCAAyC;wBAClD,6DAAM,IAAI,EAAC,KAAK,GAAG,CACf,CACP,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, State, Host } from \"@stencil/core\";\nimport { HeadingTag } from '@/globals/HeadingTag';\n\n@Component({\n  tag: 'pn-teaser-card',\n  styleUrl: 'pn-teaser-card.scss'\n})\nexport class PnTeaserCard {\n  @Element() hostElement: HTMLElement;\n  \n  @Prop() text: string = null;\n  @Prop() heading: string = null;\n  @Prop() label?: string = null;\n  @Prop() headingLevel?: string = 'h3';\n  @Prop({ reflect: true }) dataCardColor: string = 'coral';\n  @Prop({ reflect: true }) dataCardAlignment: string = 'left';\n\n  @State() hasCtaSlotContent: boolean = false;\n  @State() hasIllustrationSlot: boolean = true;\n\n  componentWillLoad() {\n    this.hasCtaSlotContent = !!this.hostElement.querySelector('[slot=\"cta\"]');\n    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot=\"illustration\"]');\n  }\n\n  render() {\n    const labelToCapitals = this.label?.toUpperCase();\n\n    return (\n      <Host>\n        <slot name=\"clickable-block-wrapper\" />\n        <div class=\"pn-teaser-card__container\">\n          <div class={`pn-teaser-card__container__image__container ${!this.hasIllustrationSlot ? 'pn-teaser-card__container__image__container--no-image' : ''}`}>\n            <slot name=\"illustration\" />\n          </div>\n          <div class=\"pn-teaser-card__container__content\">\n            <div class=\"pn-teaser-card__container__content__text__container\">\n              {labelToCapitals && <span class=\"pn-teaser-card__container__content__text__container__label\">{labelToCapitals}</span>}\n              {this.heading && <HeadingTag level={this.headingLevel} cssClass=\"pn-teaser-card__container__content__text__container__heading\">\n                  {this.heading}\n                </HeadingTag>}\n              <p class=\"pn-teaser-card__container__content__text__container__preamble\">{this.text}</p>\n            </div>\n            {this.hasCtaSlotContent && (\n              <div class=\"pn-teaser-card__container__content__cta\">\n                <slot name=\"cta\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/components/cards/pn-teaser-card/pn-teaser-card.stories.js

@@ -188,19 +188,19 @@ OneThird.args = {
       heading: 'E-commerce & Logistics',
       text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique',
       buttonLabel: 'Some button',
-      headingLevel: '',
+      headingLevel: 'h2',
     },
     {
       heading: 'Lorem ipsum dolor sit amet',
       text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique Pellentesque lectus orci',
       buttonLabel: 'Some button',
-      headingLevel: 2,
+      headingLevel: 'h2',
     },
     {
       heading: 'Communications',
       text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
       buttonLabel: 'Some button',
-      headingLevel: 1,
+      headingLevel: 'h1',
     },
   ],
 };

package/collection/components/charts/pn-chart/pn-chart.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-chart {
   display: flex;
   height: 100%;

package/collection/components/charts/pn-charts-card/pn-charts-card.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-charts-card {
   width: 100%;
   height: 100%;

package/collection/components/cta/pn-cta-block/pn-cta-block.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-cta-block {
   display: flex;
   justify-content: center;

package/collection/components/cta/pn-parcel-tracker/pn-parcel-tracker.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-spotlight .pn-spotlight__container:has(pn-parcel-tracker) [slot=mobile-heading] {
   color: #005d92;
 }

package/collection/components/cta/pn-quick-cta/pn-quick-cta.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-quick-cta {
   width: 100%;
 }

package/collection/components/cta/pn-share/pn-share-item.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-share-item .pn-share-item__container {
   padding: 0.3rem 0.6rem;
   border: 1px solid #d3cecb;

package/collection/components/cta/pn-share/pn-share.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-share .pn-share__container {
   display: flex;
   flex-direction: column;

package/collection/components/cta/pn-spotlight/pn-spotlight.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-spotlight .pn-spotlight__container {
   overflow: hidden;
 }

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-stats-info-data {
   width: 50%;
 }

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-stats-info .pn-stats-info__container {
   display: flex;
   flex-direction: row;

package/collection/components/input/pn-address-autofill/pn-address-autofill.css

@@ -2,7 +2,37 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
-pn-address-autofill pn-marketweb-input {
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+pn-address-autofill {
+  display: flex;
+  flex-direction: column;
+  width: 50rem;
+}
+pn-address-autofill pn-input {
   width: 50%;
 }
 pn-address-autofill .input-container-row {