@aurodesignsystem-dev/auro-banner 0.0.0-pr103.4 → 0.0.0-pr103.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/demo/api.md CHANGED
@@ -13,12 +13,12 @@ The `auro-banner` element provides users a flexible way to convey a summary of i
13
13
  | alignRight | alignRight | | boolean | | Use to align text to the right side of the banner |
14
14
  | appearance | appearance | | string | `default` | Defines whether the component will be on lighter or darker backgrounds |
15
15
  | billboard | billboard | | boolean | | Use to enable billboard style configuration |
16
- | hero | hero | | boolean | `false` | Use to enable hero style configuration |
16
+ | hero | hero | | boolean | | Use to enable hero style configuration |
17
17
  | iconbg | iconbg | | string | | Use in conjunction with the iconic variant to specify the background color of the icon |
18
- | iconic | iconic | | boolean | `false` | Used similarly to the `hero` variant, but adds an icon slot and removes the display image on mobile |
19
- | marquee | marquee | | boolean | `false` | Use to enable marquee style configuration |
18
+ | iconic | iconic | | boolean | | Used similarly to the `hero` variant, but adds an icon slot and removes the display image on mobile |
19
+ | marquee | marquee | | boolean | | Use to enable marquee style configuration |
20
20
  | onDark | onDark | | boolean | | DEPRECATED - use `appearance="inverse"` instead. |
21
- | roundedBorder | roundedBorder | | boolean | `false` | Use to enable rounded border style configuration |
21
+ | roundedBorder | roundedBorder | | boolean | | Use to enable rounded border style configuration |
22
22
  | slim | slim | | boolean | | Use to enable slimmer padding to the default banner |
23
23
  | solid | solid | | boolean | | Use to enable a solid background color as opposed to a transparent background |
24
24
 
@@ -208,6 +208,10 @@ class AuroBanner extends i$2 {
208
208
  constructor() {
209
209
  super();
210
210
 
211
+ this._initializeDefaults();
212
+ }
213
+
214
+ _initializeDefaults() {
211
215
  this.appearance = "default";
212
216
  this.hero = false;
213
217
  this.iconic = false;
@@ -2,7 +2,7 @@ import{css as e,LitElement as s}from"lit";import{classMap as a}from"lit/directiv
2
2
  `;class c extends s{constructor(){super(),this.level=1,this.typography="heading",this.runtimeUtils=new o}static get properties(){return{level:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},display:{type:String,reflect:!0},visualLevel:{type:Number,reflect:!0,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},typography:{type:String,reflect:!0},color:{type:String,reflect:!0},margin:{type:String,reflect:!0},size:{type:String,reflect:!0}}}static get styles(){return[l]}static get displayClassMap(){return{800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){o.prototype.registerComponent(e,c)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header")}spacingDecision(e){if("both"===this.margin)switch(e){case"none":return"util_stackMarginnone--top util_stackMarginnone--bottom";case"25":return"util_stackMargin25--top util_stackMargin25--bottom";case"50":return"util_stackMargin50--top util_stackMargin50--bottom";case"100":return"util_stackMargin100--top util_stackMargin100--bottom";case"150":return"util_stackMargin150--top util_stackMargin150--bottom";case"200":return"util_stackMargin200--top util_stackMargin200--bottom";case"300":return"util_stackMargin300--top util_stackMargin300--bottom";case"400":return"util_stackMargin400--top util_stackMargin400--bottom";case"600":return"util_stackMargin600--top util_stackMargin600--bottom";case"800":return"util_stackMargin800--top util_stackMargin800--bottom";default:return""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case"none":return`util_stackMarginnone--${this.margin}`;case"25":return`util_stackMargin25--${this.margin}`;case"50":return`util_stackMargin50--${this.margin}`;case"100":return`util_stackMargin100--${this.margin}`;case"150":return`util_stackMargin150--${this.margin}`;case"200":return`util_stackMargin200--${this.margin}`;case"300":return`util_stackMargin300--${this.margin}`;case"400":return`util_stackMargin400--${this.margin}`;case"600":return`util_stackMarginX600--${this.margin}`;case"800":return`util_stackMargin800--${this.margin}`;default:return""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",n=this.spacingDecision(this.size),o=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],l={heading:!0,[o]:!0};n&&n.split(" ").forEach(e=>{e.trim()&&(l[e.trim()]=!0)});const m=a(l),d=i(`h${s}`);return r`<${d} class="${m}" style="color: ${t(this.color?this.color:void 0)}"><slot></slot></${d}>`}render(){return this.template(this.level)}}class m{generateElementName(e,s){let a=e;return a+="-",a+=s.replace(/[.]/g,"_"),a}generateTag(e,s,a){const t=this.generateElementName(e,s),r=n`${i(t)}`;return customElements.get(t)||customElements.define(t,class extends a{}),r}}class d{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{})}closestElement(e,s=this,a=(s,t=s&&s.closest(e))=>s&&s!==document&&s!==window?t||a(s.getRootNode().host):null){return a(s)}handleComponentTagRename(e,s){const a=s.toLowerCase();e.tagName.toLowerCase()!==a&&e.setAttribute(a,!0)}elementMatch(e,s){const a=s.toLowerCase();return e.tagName.toLowerCase()===a||e.hasAttribute(a)}getSlotText(e,s){const a=e.shadowRoot?.querySelector(`slot[name="${s}"]`),t=(a?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim();return t||null}}var g=e`:focus:not(:focus-visible){outline:3px solid transparent}:host{color:var(--ds-auro-banner-text-color)}:host([roundedBorder]) .disclaimer,:host([iconic]) .disclaimer,:host([billboard]) .disclaimer,:host([hero]) .disclaimer,:host([marquee]) .disclaimer{color:var(--ds-auro-banner-disclaimer-text-color)}:host([roundedBorder]) .title,:host([iconic]) .title,:host([billboard]) .title,:host([hero]) .title,:host([marquee]) .title{color:var(--ds-auro-banner-title-text-color)}:host([marquee][solid]),:host([onDark]),:host([appearance=inverse]){--ds-auro-banner-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([marquee][solid]) .title,:host([onDark]) .title,:host([appearance=inverse]) .title{--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);color:var(--ds-auro-banner-title-text-color)}:host([iconic]) .roundIconBg{background:var(--ds-auro-banner-icon-container-color)}:host([marquee][solid]) .bannerWrapper{background-color:var(--ds-auro-banner-wrapper-container-color)}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-color:var(--ds-auro-banner-wrapper-border-color)}
3
3
  `,p=e`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host([roundedBorder]) img,:host([iconic]) img,:host([hero]) img,:host([marquee]) img,:host([billboard]) img{display:block}:host([roundedBorder]) .bannerWrapper,:host([iconic]) .bannerWrapper,:host([hero]) .bannerWrapper,:host([marquee]) .bannerWrapper,:host([billboard]) .bannerWrapper{position:relative;overflow:hidden}:host([roundedBorder]) .action,:host([iconic]) .action,:host([hero]) .action,:host([marquee]) .action,:host([billboard]) .action{display:inline-block;margin:var(--ds-size-200, 1rem) 0}:host([roundedBorder]) .imageWrapper,:host([iconic]) .imageWrapper,:host([hero]) .imageWrapper,:host([marquee]) .imageWrapper,:host([billboard]) .imageWrapper{margin-bottom:var(--ds-size-200, 1rem);display:block}:host([roundedBorder]) .displayImage,:host([iconic]) .displayImage,:host([hero]) .displayImage,:host([marquee]) .displayImage,:host([billboard]) .displayImage{display:block;position:absolute;bottom:0}:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:var(--ds-size-400, 2rem) var(--ds-size-200, 1rem);overflow:hidden}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([iconic]) .bodyWrapper,:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper,:host([billboard]) .bodyWrapper{padding:var(--ds-size-200, 1rem)}}:host([roundedBorder]) .title,:host([iconic]) .title,:host([hero]) .title,:host([marquee]) .title,:host([billboard]) .title{margin-bottom:var(--ds-size-200, 1rem)}:host([roundedBorder]) .description,:host([iconic]) .description,:host([hero]) .description,:host([marquee]) .description,:host([billboard]) .description{display:block}:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:150px}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([iconic]) .contentWrapper,:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper,:host([billboard]) .contentWrapper{margin-bottom:0}}@media screen and (min-width: 576px){:host([billboard]){max-height:24rem}}:host([billboard]) .bodyWrapper{align-items:center;padding:var(--ds-size-400, 2rem)}@media screen and (min-width: 576px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 8rem}}@media screen and (min-width: 768px){:host([billboard]) .bodyWrapper{padding:var(--ds-size-400, 2rem) 10rem}}:host([billboard]) .imageWrapper{display:block;margin-bottom:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([billboard]) .contentWrapper{margin-bottom:0}}:host([hero]) .displayImage,:host([marquee]) .displayImage{position:static;overflow:hidden}:host([hero]) .displayImage::slotted(img),:host([marquee]) .displayImage::slotted(img){display:block}:host([hero]) .contentWrapper,:host([marquee]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([hero]) .displayImage,:host([marquee]) .displayImage{max-width:50%;right:0;position:absolute}:host([hero]) .bodyWrapper,:host([marquee]) .bodyWrapper{text-align:left;width:50%;padding-left:0}}:host([iconic]) .iconAbsolute{position:absolute}:host([iconic]) .iconContainer{display:flex;align-items:center;justify-content:center;position:relative;top:-1.25rem}:host([iconic]) .roundIconBg{width:7.5rem;height:7.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute}:host([iconic]) .displayImage{display:none}@media screen and (min-width: 576px){:host([iconic]) .displayImage{display:block;max-width:50%;right:0;position:absolute;overflow:hidden}}:host([iconic]) .displayImage::slotted(img){display:block}@media screen and (min-width: 576px){:host([iconic]) .description{padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-300, 1.5rem)}}:host([iconic]) .contentWrapper{margin:0 auto var(--ds-size-600, 3rem);padding-bottom:var(--ds-size-600, 3rem)}:host([iconic]) .bodyWrapper{text-align:left;padding:var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) 0}@media screen and (min-width: 576px){:host([iconic]) .bodyWrapper{width:50%;padding-left:0}}:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}@media screen and (min-width: 768px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 1024px){:host([marquee][solid]) .bodyWrapper{padding:var(--ds-size-600, 3rem)}}:host([roundedBorder]) .bannerWrapper,:host([roundedBorder][alignLeft]) .bannerWrapper{border-width:1px;border-style:solid;border-radius:5px}:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{margin:0 auto}@media screen and (min-width: 576px){:host([roundedBorder]) .contentWrapper,:host([roundedBorder][alignLeft]) .contentWrapper{flex-basis:70%;flex-grow:1}}:host([roundedBorder]) .action,:host([roundedBorder][alignLeft]) .action{margin:0 0 1rem}:host([roundedBorder]) .description p,:host([roundedBorder][alignLeft]) .description p{margin:0}:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{align-items:center;padding:var(--ds-size-200, 1rem)}@media screen and (min-width: 576px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{flex-direction:row}}@media screen and (min-width: 768px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-300, 1.5rem)}}@media screen and (min-width: 1024px){:host([roundedBorder]) .bodyWrapper,:host([roundedBorder][alignLeft]) .bodyWrapper{padding:var(--ds-size-400, 2rem)}}@media screen and (min-width: 576px){:host([roundedBorder]) .imageWrapper,:host([roundedBorder][alignLeft]) .imageWrapper{flex-basis:30%;display:flex;margin-right:var(--ds-size-400, 2rem);margin-bottom:0}}:host([alignRight]) .bodyWrapper{align-items:flex-end;text-align:right}:host([alignLeft]) .bodyWrapper{align-items:flex-start;text-align:left}@media screen and (min-width: 576px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem);min-height:unset}}@media screen and (min-width: 768px){:host([slim]) .bodyWrapper{padding:var(--ds-size-400, 2rem) var(--ds-size-600, 3rem)}}
4
4
  `,h=e`:host{--ds-auro-banner-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-banner-disclaimer-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-banner-title-text-color: var(--ds-basic-color-texticon-accent1, #265688);--ds-auro-banner-icon-container-color: var(--ds-basic-color-surface-neutral-medium, #c5c5c5);--ds-auro-banner-wrapper-container-color: var(--ds-basic-color-surface-inverse, #00274a);--ds-auro-banner-wrapper-border-color: var(--ds-basic-color-border-default, #959595)}
5
- `;class y extends s{constructor(){super(),this.appearance="default",this.hero=!1,this.iconic=!1,this.marquee=!1,this.roundedBorder=!1;const e=new m;this.headerTag=e.generateTag("auro-header","5.0.0",c),this.runtimeUtils=new d}static register(e="auro-banner"){d.prototype.registerComponent(e,y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-banner");const e=this.shadowRoot.querySelectorAll(".bannerWrapper slot");for(const s of e)this.slt=s.assignedNodes(),0===this.slt.length&&s.removeAttribute("class")}static get properties(){return{...s.properties,alignLeft:{type:Boolean,reflect:!0},alignRight:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},billboard:{type:Boolean,reflect:!0},hero:{type:Boolean,reflect:!0},iconbg:{type:String},iconic:{type:Boolean,reflect:!0},marquee:{type:Boolean,reflect:!0},onDark:{type:Boolean,reflect:!0},roundedBorder:{type:Boolean,reflect:!0},slim:{type:Boolean,reflect:!0},solid:{type:Boolean,reflect:!0}}}static get styles(){return[p,g,h]}render(){return r`
5
+ `;class y extends s{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.appearance="default",this.hero=!1,this.iconic=!1,this.marquee=!1,this.roundedBorder=!1;const e=new m;this.headerTag=e.generateTag("auro-header","5.0.0",c),this.runtimeUtils=new d}static register(e="auro-banner"){d.prototype.registerComponent(e,y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-banner");const e=this.shadowRoot.querySelectorAll(".bannerWrapper slot");for(const s of e)this.slt=s.assignedNodes(),0===this.slt.length&&s.removeAttribute("class")}static get properties(){return{...s.properties,alignLeft:{type:Boolean,reflect:!0},alignRight:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},billboard:{type:Boolean,reflect:!0},hero:{type:Boolean,reflect:!0},iconbg:{type:String},iconic:{type:Boolean,reflect:!0},marquee:{type:Boolean,reflect:!0},onDark:{type:Boolean,reflect:!0},roundedBorder:{type:Boolean,reflect:!0},slim:{type:Boolean,reflect:!0},solid:{type:Boolean,reflect:!0}}}static get styles(){return[p,g,h]}render(){return r`
6
6
  <div class="bannerWrapper">
7
7
  ${this.roundedBorder?r``:r`
8
8
  <slot name="displayImage" class="displayImage"></slot>`}
package/dist/index.d.ts CHANGED
@@ -148,6 +148,7 @@ export type AuroBannerProps = {
148
148
  *
149
149
  * Methods that can be called to access component functionality.
150
150
  *
151
+ * - `_initializeDefaults() => void`: undefined
151
152
  * - `register(name?: string = "auro-banner") => void`: This will register this element with the browser.
152
153
  */
153
154
  "auro-banner": Partial<AuroBannerProps & BaseProps<AuroBanner> & BaseEvents>;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- export{A as AuroBanner}from"./auro-banner-DX6gK5MC.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";
1
+ export{A as AuroBanner}from"./auro-banner-B-yqrP_2.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";
@@ -1 +1 @@
1
- import{A as i}from"./auro-banner-DX6gK5MC.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";i.register();
1
+ import{A as i}from"./auro-banner-B-yqrP_2.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/static-html.js";i.register();
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem-dev/auro-banner",
10
- "version": "0.0.0-pr103.4",
10
+ "version": "0.0.0-pr103.6",
11
11
  "description": "auro-banner HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -64,7 +64,12 @@
64
64
  "exports": {
65
65
  "./package.json": "./package.json",
66
66
  "./readme.md": "./README.md",
67
- ".": "./dist/registered.js",
67
+ "./custom-elements.json": "./custom-elements.json",
68
+ ".": {
69
+ "module": "./dist/registered.js",
70
+ "types": "./dist/index.d.ts",
71
+ "default": "./dist/registered.js"
72
+ },
68
73
  "./demo/*.md": "./demo/*.md",
69
74
  "./demo/*.js": "./demo/*.min.js",
70
75
  "./class": {