@proximus/lavender-typography 2.0.0-alpha.203 → 2.0.0-alpha.205

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.
Files changed (5) hide show
  1. package/dist/Typography.d.ts +1 -1
  2. package/dist/custom-elements.json +3 -5
  3. package/dist/index.es.js +13 -10
  4. package/dist/web-types.json +1 -2
  5. package/package.json +1 -1
package/dist/Typography.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare class Typography extends HTMLElement {
2
- private template;
2
+ protected static readonly template: HTMLTemplateElement;
3
3
  constructor();
4
4
  static get observedAttributes(): string[];
5
5
  get inverted(): boolean;
package/dist/custom-elements.json CHANGED
@@ -14,16 +14,14 @@
14
14
  {
15
15
  "kind": "field",
16
16
  "name": "template",
17
- "privacy": "private"
17
+ "privacy": "protected",
18
+ "static": true,
19
+ "readonly": true
18
20
  },
19
21
  {
20
22
  "kind": "field",
21
23
  "name": "inverted"
22
24
  },
23
- {
24
- "kind": "field",
25
- "name": "innerHTML"
26
- },
27
25
  {
28
26
  "kind": "field",
29
27
  "name": "adoptedStyleSheets",
package/dist/index.es.js CHANGED
@@ -1,15 +1,18 @@
1
- import { addGlobalStylesheet as e, booleanPropertyToAttributeSetter as t } from "@proximus/lavender-common";
1
+ import { addGlobalStylesheet as e, booleanPropertyToAttributeSetter as t, createTemplate as n, renderTemplate as r } from "@proximus/lavender-common";
2
2
  //#region ../Heading/src/heading.css?inline
3
- var n = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{font-family:var(--px-font-family);color:var(--heading-color-default,var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile,left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);margin:0}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted,var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (width>=48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (width>=64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (width>=90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", r = ":host([variant=icon-link]){display:inline-flex}a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default);align-items:center;display:inline}:is(a,.link,::slotted(a)):hover{color:var(--px-color-text-state-hover-default)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:is(a,.link,::slotted(a))[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-mobile)}:is(a,.link,::slotted(a)) ::slotted(span[slot=after]),:is(a,.link,::slotted(a)) ::slotted(span[slot=before]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}:is(a.no-style,a.wrapper):hover,:is(a.no-style,a.wrapper):focus-visible{color:inherit}a.wrapper{line-height:0;display:block}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile);position:absolute;top:auto;left:-10000px;overflow:hidden}a.skip-link:focus-visible{z-index:999;left:auto}:host([target=_blank]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):hover{color:var(--px-color-text-state-hover-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a))[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (width>=64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (width>=90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}", i = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (width<=48rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (width>=48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (width>=64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (width>=90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", a = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (width>=48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (width>=64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}", o = ":host{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-mobile) var(--px-spacing-default-mobile);padding:0}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-mobile)}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}@media screen and (width>=48rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-tablet) var(--px-spacing-default-tablet)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-laptop) var(--px-spacing-default-laptop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-desktop) var(--px-spacing-default-desktop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-desktop)}}:host([inverted]){color:var(--px-color-text-neutral-inverted)}", s = ".li{margin-bottom:var(--px-padding-xs-mobile)}@media screen and (width>=48rem){.li{margin-bottom:var(--px-padding-xs-tablet)}}@media screen and (width>=64.0625rem){.li{margin-bottom:var(--px-padding-xs-laptop)}}@media screen and (width>=90.0625rem){.li{margin-bottom:var(--px-padding-xs-desktop)}}", c = new CSSStyleSheet(), l = new CSSStyleSheet(), u = new CSSStyleSheet(), d = new CSSStyleSheet(), f = new CSSStyleSheet();
4
- c.replaceSync(o), l.replaceSync(n), u.replaceSync(r), d.replaceSync(i), f.replaceSync(a), e(s);
5
- var p = class extends HTMLElement {
3
+ var i = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{font-family:var(--px-font-family);color:var(--heading-color-default,var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile,left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);margin:0}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted,var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (width>=48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (width>=64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (width>=90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop,left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", a = ":host([variant=icon-link]){display:inline-flex}a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default);align-items:center;display:inline}:is(a,.link,::slotted(a)):hover{color:var(--px-color-text-state-hover-default)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}:is(a,.link,::slotted(a))[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-mobile)}:is(a,.link,::slotted(a)) ::slotted(span[slot=after]),:is(a,.link,::slotted(a)) ::slotted(span[slot=before]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}:is(a.no-style,a.wrapper):hover,:is(a.no-style,a.wrapper):focus-visible{color:inherit}a.wrapper{line-height:0;display:block}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile);position:absolute;top:auto;left:-10000px;overflow:hidden}a.skip-link:focus-visible{z-index:999;left:auto}:host([target=_blank]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):hover{color:var(--px-color-text-state-hover-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a)):focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:is(:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a))[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (width>=64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (width>=90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}:is(a,.link,::slotted(a)):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(a,.link,::slotted(a)) ::slotted([slot=after]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}", o = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (width<=48rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (width>=48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (width>=64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (width>=90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", s = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-text-neutral-inverted)}:host([strikethrough]) span{text-decoration:line-through}span.link{text-decoration:underline}@media screen and (width>=48rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}@media screen and (width>=64.0625rem){span,::slotted(span){font-size:var(--px-text-size-body-m-desktop)}}", c = ":host{font-family:var(--px-font-family);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-mobile) var(--px-spacing-default-mobile);padding:0}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-mobile)}::slotted(b),::slotted(strong){font-weight:var(--px-font-weight-title)}::slotted(address){font-style:normal;font-weight:var(--px-font-weight-body)}::slotted(img){max-width:100%;height:auto}@media screen and (width>=48rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-tablet) var(--px-spacing-default-tablet)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-laptop) var(--px-spacing-default-laptop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){::slotted(ul),::slotted(ol){margin:0 0 var(--px-spacing-xs-desktop) var(--px-spacing-default-desktop)}::slotted(blockquote){margin-bottom:var(--px-spacing-xs-desktop)}}:host([inverted]){color:var(--px-color-text-neutral-inverted)}", l = ".li{margin-bottom:var(--px-padding-xs-mobile)}@media screen and (width>=48rem){.li{margin-bottom:var(--px-padding-xs-tablet)}}@media screen and (width>=64.0625rem){.li{margin-bottom:var(--px-padding-xs-laptop)}}@media screen and (width>=90.0625rem){.li{margin-bottom:var(--px-padding-xs-desktop)}}", u = new CSSStyleSheet(), d = new CSSStyleSheet(), f = new CSSStyleSheet(), p = new CSSStyleSheet(), m = new CSSStyleSheet();
4
+ u.replaceSync(c), d.replaceSync(i), f.replaceSync(a), p.replaceSync(o), m.replaceSync(s), e(l);
5
+ var h = class e extends HTMLElement {
6
+ static {
7
+ this.template = n("<slot></slot>");
8
+ }
6
9
  constructor() {
7
- super(), this.template = () => "<slot></slot>", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
8
- c,
9
- l,
10
+ super(), this.attachShadow({ mode: "open" }), r(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [
10
11
  u,
11
12
  d,
12
- f
13
+ f,
14
+ p,
15
+ m
13
16
  ];
14
17
  }
15
18
  static get observedAttributes() {
@@ -27,6 +30,6 @@ var p = class extends HTMLElement {
27
30
  });
28
31
  }
29
32
  };
30
- customElements.get("px-typography") || customElements.define("px-typography", p);
33
+ customElements.get("px-typography") || customElements.define("px-typography", h);
31
34
  //#endregion
32
- export { p as Typography };
35
+ export { h as Typography };
package/dist/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-typography",
4
- "version": "2.0.0-alpha.203",
4
+ "version": "2.0.0-alpha.205",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -15,7 +15,6 @@
15
15
  "js": {
16
16
  "properties": [
17
17
  { "name": "inverted" },
18
- { "name": "innerHTML" },
19
18
  { "name": "adoptedStyleSheets", "type": "array" }
20
19
  ],
21
20
  "events": []
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-typography",
3
- "version": "2.0.0-alpha.203",
3
+ "version": "2.0.0-alpha.205",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",