@zanichelli/albe-web-components 16.4.0-rc-2 → 16.4.1

package/www/build/p-ceb4403d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as s,g as o}from"./p-75c4a726.js";import{g as n}from"./p-1c24255c.js";import{a}from"./p-90908f36.js";import"./p-5145a606.js";const h=':host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-secondary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:0;left:0;width:100%;height:var(--border-size-large);background-color:var(--color-secondary01);content:""}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot="item"]:last-child){border-bottom:0}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active){border-color:var(--color-secondary01);font-weight:var(--font-bd)}';const r=h;const l=t=>(t===null||t===void 0?void 0:t.tagName)==="Z-MENU-SECTION";const c=class{get focusableItem(){return this.items.find((t=>l(t)?t.htmlTabindex===0:t.tabIndex===0))}toggle(){if(!this.hasContent){return}this.open=!this.open}onLabelSlotChange(t){const i=t.target.assignedElements()[0];i.dataset.text=i===null||i===void 0?void 0:i.textContent;this.setLabelA11yAttrs()}reflow(t=false){if(!this.floating){return}if(this.content&&this.hasContent){const{style:t}=this.content;const{left:i}=this.host.getBoundingClientRect();const e=getComputedStyle(this.content).width;const s=e?parseFloat(e.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-i-s-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.host.querySelectorAll("[slot=header]").length;this.hasContent=!!this.host.querySelectorAll("[slot=item]").length||this.hasHeader}setItemTabindex(t,i){if(l(t)){t.htmlTabindex=i}else{t.tabIndex=i}}setItemsA11yAttrs(){this.items.forEach(((t,i)=>{const e=i===0?0:-1;this.setItemTabindex(t,e);if(!l(t)){t.setAttribute("role","menuitem")}}))}onItemsChange(){this.checkContent();this.items=Array.from(this.host.children).filter((({slot:t})=>t==="item"));this.setItemsA11yAttrs();this.items.forEach((t=>{if(!l(t)){t.dataset.text=t.textContent}}))}moveFocus(t,i){if(l(t)){t.setFocus()}else{t.tabIndex=0;setTimeout((()=>{t.focus()}),100)}if(!i){return}this.setItemTabindex(i,-1)}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===n.ENTER||t.key===n.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.moveFocus(this.items[0])}return}if(!this.verticalContext){return}if(t.key===n.ARROW_RIGHT&&!this.open){t.preventDefault();t.stopPropagation();this.open=true;this.moveFocus(this.items[0])}}async setFocus(){this.htmlTabindex=0;const t=this.hasContent?this.labelButton:this.host.firstElementChild;t.focus()}async focusLastItem(){const t=this.items[this.items.length-1];if(l(t)&&t.open){t.focusLastItem();return}this.moveFocus(t)}onOpenChanged(){if(!this.open){cancelAnimationFrame(this.raf);this.closed.emit();this.items.forEach((t=>{if(l(t)&&t.open){t.open=false}}));return}this.setItemsA11yAttrs();this.opened.emit();if(this.floating){this.reflow(true)}}setLabelA11yAttrs(){if(this.hasContent&&this.labelButton){this.labelButton.tabIndex=this.htmlTabindex;return}const t=this.host.firstElementChild;t.role="menuitem";t.tabIndex=this.htmlTabindex}onItemClick(t){const i=this.items.find((i=>a(i,t.target)));if(i){this.items.forEach((t=>{if(t===i){return}if(l(t)){t.htmlTabindex=-1}else{t.tabIndex=-1}}))}}onKeyDown(t){var i;if(!this.hasContent){return}switch(t.key){case n.ESC:if(!this.open){break}t.stopPropagation();t.preventDefault();this.open=false;this.setFocus();break;case n.ARROW_DOWN:{if(document.activeElement===this.host){if(this.verticalContext&&!this.open){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[0]);break}const i=this.items.indexOf(this.focusableItem);if(this.verticalContext&&i===this.items.length-1){this.setItemTabindex(this.items[i],-1);this.htmlTabindex=0;break}t.stopPropagation();t.preventDefault();const e=this.items[i+1];this.moveFocus(e!==null&&e!==void 0?e:this.items[0],this.focusableItem);break}case n.ARROW_UP:{if(document.activeElement===this.host){if(this.verticalContext){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[this.items.length-1],this.focusableItem);break}t.stopPropagation();t.preventDefault();const e=this.items.indexOf(this.focusableItem);if(e===0&&this.verticalContext){this.setItemTabindex(this.focusableItem,-1);this.setFocus();break}const s=(i=this.items[e-1])!==null&&i!==void 0?i:this.items[this.items.length-1];if(l(s)&&s.open){this.setItemTabindex(this.focusableItem,-1);s.focusLastItem();break}this.moveFocus(s,this.focusableItem);break}case n.ARROW_LEFT:if(!this.open||!this.verticalContext){break}t.preventDefault();t.stopPropagation();this.open=false;this.setFocus()}}constructor(e){t(this,e);this.opened=i(this,"opened",7);this.closed=i(this,"closed",7);this.items=[];this.active=undefined;this.floating=true;this.open=false;this.verticalContext=false;this.htmlTabindex=-1;this.hasHeader=undefined;this.hasContent=undefined;this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this)}componentWillLoad(){this.setLabelA11yAttrs();this.onItemsChange()}render(){if(!this.hasContent){return e("div",{class:"menu-label"},e("slot",{onSlotchange:this.onLabelSlotChange}))}return e(s,null,e("button",{ref:t=>this.labelButton=t,class:"menu-label","aria-expanded":`${!!this.open}`,"aria-haspopup":`${this.hasContent}`,"aria-label":this.open?"Chiudi menù":"Apri menù",role:"menuitem",tabIndex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},e("slot",{onSlotchange:this.onLabelSlotChange}),e("z-icon",{name:this.open?"chevron-up":"chevron-down"})),e("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&e("header",{class:"header"},e("slot",{name:"header",onSlotchange:this.checkContent})),e("div",{class:"items",role:"menu"},e("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get host(){return o(this)}static get watchers(){return{open:["onOpenChanged"],htmlTabindex:["setLabelA11yAttrs"]}}};c.style=r;export{c as z_menu};
+//# sourceMappingURL=p-ceb4403d.entry.js.map

package/www/build/p-ceb4403d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMenuStyle0","isZMenuSection","el","tagName","ZMenu","focusableItem","this","items","find","item","htmlTabindex","tabIndex","toggle","hasContent","open","onLabelSlotChange","ev","labelElement","target","assignedElements","dataset","text","textContent","setLabelA11yAttrs","reflow","live","floating","content","style","left","host","getBoundingClientRect","widthPx","getComputedStyle","width","parseFloat","replace","safeScrollbarSpace","Math","min","window","innerWidth","raf","requestAnimationFrame","bind","checkContent","hasHeader","querySelectorAll","length","setItemTabindex","setItemsA11yAttrs","forEach","index","tabindex","setAttribute","onItemsChange","Array","from","children","filter","slot","moveFocus","receiver","current","setFocus","setTimeout","focus","onLabelClick","onLabelKeydown","key","KeyboardCode","ENTER","SPACE","preventDefault","stopPropagation","verticalContext","ARROW_RIGHT","label","labelButton","firstElementChild","focusLastItem","lastItem","onOpenChanged","cancelAnimationFrame","closed","emit","opened","slottedLabel","role","onItemClick","clickedItem","containsElement","onKeyDown","ESC","ARROW_DOWN","document","activeElement","currentIndex","indexOf","ARROW_UP","_a","ARROW_LEFT","constructor","hostRef","componentWillLoad","render","h","class","onSlotchange","Host","ref","onClick","name"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n  outline: none;\n}\n\n:host {\n  --z-menu-label-color: ;\n\n  position: relative;\n  display: inline-flex;\n  height: fit-content;\n  flex-direction: column;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-bottom: var(--border-size-large) solid transparent;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(:is([active], [open])) .menu-label ::slotted(*),\n.menu-label:focus-visible ::slotted(*),\ndiv.menu-label:focus-within ::slotted(*) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n\n:host([vertical-context]) .menu-label {\n  padding: var(--space-unit) 0;\n  border-width: var(--border-size-small);\n  border-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label,\n.menu-label:hover,\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  border-color: var(--color-secondary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-visible::after,\n:host([vertical-context]) div.menu-label:focus-within::after {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n  background-color: var(--color-secondary01);\n  content: \"\";\n}\n\n:host([vertical-context]) .menu-label ::slotted(*) {\n  padding: 0;\n}\n\n.menu-label ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  min-width: fit-content;\n  padding-bottom: 2px;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color, var(--color-default-text));\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: inherit;\n  line-height: 1.5;\n  white-space: nowrap;\n}\n\n.menu-label z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text]:not([slot]))::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text]:not([slot]))::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]:not([slot])) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: 0 calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:last-child) {\n  border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active) {\n  border-color: var(--color-secondary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `active` HTML attribute on the element to highlight it. Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop()\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2JAAA,MAAMA,EAAY,wnHAClB,MAAAC,EAAeD,ECGf,MAAME,EAAkBC,IACtBA,IAAE,MAAFA,SAAE,SAAFA,EAAIC,WAAY,iB,MAaLC,EAAK,MAwDhB,iBAAYC,GACV,OAAOC,KAAKC,MAAMC,MAAMC,GAAUR,EAAeQ,GAAQA,EAAKC,eAAiB,EAAID,EAAKE,WAAa,G,CAG/F,MAAAC,GACN,IAAKN,KAAKO,WAAY,CACpB,M,CAGFP,KAAKQ,MAAQR,KAAKQ,I,CAOZ,iBAAAC,CAAkBC,GACxB,MAAMC,EAAgBD,EAAGE,OAA2BC,mBAAmB,GACvEF,EAAaG,QAAQC,KAAOJ,IAAY,MAAZA,SAAY,SAAZA,EAAcK,YAC1ChB,KAAKiB,mB,CAOC,MAAAC,CAAOC,EAAO,OACpB,IAAKnB,KAAKoB,SAAU,CAClB,M,CAGF,GAAIpB,KAAKqB,SAAWrB,KAAKO,WAAY,CACnC,MAAMe,MAACA,GAAStB,KAAKqB,QACrB,MAAME,KAACA,GAAQvB,KAAKwB,KAAKC,wBACzB,MAAMC,EAAUC,iBAAiB3B,KAAKqB,SAASO,MAC/C,MAAMA,EAAQF,EAAUG,WAAWH,EAAQI,QAAQ,KAAM,KAAO,IAChE,MAAMC,EAAqB,GAC3BT,EAAMC,KAAO,GAAGS,KAAKC,IAAIC,OAAOC,WAAaZ,EAAOK,EAAQG,EAAoB,M,CAElF,GAAIZ,EAAM,CACRnB,KAAKoC,IAAMC,sBAAsBrC,KAAKkB,OAAOoB,KAAKtC,KAAMmB,G,EAOpD,YAAAoB,GACNvC,KAAKwC,YAAcxC,KAAKwB,KAAKiB,iBAAiB,iBAAiBC,OAC/D1C,KAAKO,aAAeP,KAAKwB,KAAKiB,iBAAiB,eAAeC,QAAU1C,KAAKwC,S,CAGvE,eAAAG,CAAgBxC,EAA6CE,GACnE,GAAIV,EAAeQ,GAAO,CACxBA,EAAKC,aAAeC,C,KACf,CACLF,EAAKE,SAAWA,C,EAQZ,iBAAAuC,GACN5C,KAAKC,MAAM4C,SAAQ,CAAC1C,EAAM2C,KACxB,MAAMC,EAAWD,IAAU,EAAI,GAAK,EACpC9C,KAAK2C,gBAAgBxC,EAAM4C,GAC3B,IAAKpD,EAAeQ,GAAO,CACzBA,EAAK6C,aAAa,OAAQ,W,KAKxB,aAAAC,GACNjD,KAAKuC,eACLvC,KAAKC,MAAQiD,MAAMC,KAAKnD,KAAKwB,KAAK4B,UAAUC,QAAO,EAAEC,UAAUA,IAAS,SACxEtD,KAAK4C,oBACL5C,KAAKC,MAAM4C,SAAS1C,IAClB,IAAKR,EAAeQ,GAAO,CACzBA,EAAKW,QAAQC,KAAOZ,EAAKa,W,KAUvB,SAAAuC,CACNC,EACAC,GAEA,GAAI9D,EAAe6D,GAAW,CAC5BA,EAASE,U,KACJ,CACLF,EAASnD,SAAW,EACpBsD,YAAW,KACTH,EAASI,OAAO,GACf,I,CAEL,IAAKH,EAAS,CACZ,M,CAGFzD,KAAK2C,gBAAgBc,GAAU,E,CAGzB,YAAAI,GACN7D,KAAKM,SACLN,KAAK0D,U,CAGC,cAAAI,CAAepD,GACrB,GAAIA,EAAGqD,MAAQC,EAAaC,OAASvD,EAAGqD,MAAQC,EAAaE,MAAO,CAClExD,EAAGyD,iBACHzD,EAAG0D,kBACHpE,KAAKM,SACL,GAAIN,KAAKQ,KAAM,CACbR,KAAKuD,UAAUvD,KAAKC,MAAM,G,CAG5B,M,CAGF,IAAKD,KAAKqE,gBAAiB,CACzB,M,CAGF,GAAI3D,EAAGqD,MAAQC,EAAaM,cAAgBtE,KAAKQ,KAAM,CACrDE,EAAGyD,iBACHzD,EAAG0D,kBACHpE,KAAKQ,KAAO,KACZR,KAAKuD,UAAUvD,KAAKC,MAAM,G,EAM9B,cAAMyD,GACJ1D,KAAKI,aAAe,EACpB,MAAMmE,EAAQvE,KAAKO,WAAaP,KAAKwE,YAAexE,KAAKwB,KAAKiD,kBAC9DF,EAAMX,O,CAOR,mBAAMc,GACJ,MAAMC,EAAW3E,KAAKC,MAAMD,KAAKC,MAAMyC,OAAS,GAChD,GAAI/C,EAAegF,IAAaA,EAASnE,KAAM,CAC7CmE,EAASD,gBAET,M,CAGF1E,KAAKuD,UAAUoB,E,CAIjB,aAAAC,GACE,IAAK5E,KAAKQ,KAAM,CACdqE,qBAAqB7E,KAAKoC,KAC1BpC,KAAK8E,OAAOC,OACZ/E,KAAKC,MAAM4C,SAAS1C,IAClB,GAAIR,EAAeQ,IAASA,EAAKK,KAAM,CACrCL,EAAKK,KAAO,K,KAIhB,M,CAGFR,KAAK4C,oBACL5C,KAAKgF,OAAOD,OACZ,GAAI/E,KAAKoB,SAAU,CACjBpB,KAAKkB,OAAO,K,EAKhB,iBAAAD,GACE,GAAIjB,KAAKO,YAAcP,KAAKwE,YAAa,CACvCxE,KAAKwE,YAAYnE,SAAWL,KAAKI,aAEjC,M,CAGF,MAAM6E,EAAejF,KAAKwB,KAAKiD,kBAC/BQ,EAAaC,KAAO,WACpBD,EAAa5E,SAAWL,KAAKI,Y,CAO/B,WAAA+E,CAAYzE,GACV,MAAM0E,EAAcpF,KAAKC,MAAMC,MAAMC,GAASkF,EAAgBlF,EAAMO,EAAGE,UACvE,GAAIwE,EAAa,CACfpF,KAAKC,MAAM4C,SAAS1C,IAClB,GAAIA,IAASiF,EAAa,CACxB,M,CAGF,GAAIzF,EAAeQ,GAAO,CACxBA,EAAKC,cAAgB,C,KAChB,CACLD,EAAKE,UAAY,C,MAOzB,SAAAiF,CAAU5E,G,MACR,IAAKV,KAAKO,WAAY,CACpB,M,CAGF,OAAQG,EAAGqD,KACT,KAAKC,EAAauB,IAChB,IAAKvF,KAAKQ,KAAM,CACd,K,CAEFE,EAAG0D,kBACH1D,EAAGyD,iBACHnE,KAAKQ,KAAO,MACZR,KAAK0D,WACL,MACF,KAAKM,EAAawB,WAAY,CAC5B,GAAIC,SAASC,gBAAkB1F,KAAKwB,KAAM,CACxC,GAAIxB,KAAKqE,kBAAoBrE,KAAKQ,KAAM,CACtC,K,CAGFE,EAAG0D,kBACH1D,EAAGyD,iBACH,IAAKnE,KAAKQ,KAAM,CACdR,KAAKQ,KAAO,I,CAEdR,KAAKuD,UAAUvD,KAAKC,MAAM,IAC1B,K,CAGF,MAAM0F,EAAe3F,KAAKC,MAAM2F,QAAQ5F,KAAKD,eAC7C,GAAIC,KAAKqE,iBAAmBsB,IAAiB3F,KAAKC,MAAMyC,OAAS,EAAG,CAElE1C,KAAK2C,gBAAgB3C,KAAKC,MAAM0F,IAAgB,GAChD3F,KAAKI,aAAe,EACpB,K,CAGFM,EAAG0D,kBACH1D,EAAGyD,iBACH,MAAMX,EAAWxD,KAAKC,MAAM0F,EAAe,GAE3C3F,KAAKuD,UAAUC,IAAQ,MAARA,SAAQ,EAARA,EAAYxD,KAAKC,MAAM,GAAID,KAAKD,eAC/C,K,CAEF,KAAKiE,EAAa6B,SAAU,CAC1B,GAAIJ,SAASC,gBAAkB1F,KAAKwB,KAAM,CACxC,GAAIxB,KAAKqE,gBAAiB,CACxB,K,CAGF3D,EAAG0D,kBACH1D,EAAGyD,iBAEH,IAAKnE,KAAKQ,KAAM,CACdR,KAAKQ,KAAO,I,CAEdR,KAAKuD,UAAUvD,KAAKC,MAAMD,KAAKC,MAAMyC,OAAS,GAAI1C,KAAKD,eACvD,K,CAGFW,EAAG0D,kBACH1D,EAAGyD,iBACH,MAAMwB,EAAe3F,KAAKC,MAAM2F,QAAQ5F,KAAKD,eAC7C,GAAI4F,IAAiB,GAAK3F,KAAKqE,gBAAiB,CAC9CrE,KAAK2C,gBAAgB3C,KAAKD,eAAgB,GAC1CC,KAAK0D,WACL,K,CAGF,MAAMF,GAAWsC,EAAA9F,KAAKC,MAAM0F,EAAe,MAAE,MAAAG,SAAA,EAAAA,EAAI9F,KAAKC,MAAMD,KAAKC,MAAMyC,OAAS,GAEhF,GAAI/C,EAAe6D,IAAaA,EAAShD,KAAM,CAC7CR,KAAK2C,gBAAgB3C,KAAKD,eAAgB,GAC1CyD,EAASkB,gBACT,K,CAGF1E,KAAKuD,UAAUC,EAAUxD,KAAKD,eAC9B,K,CAEF,KAAKiE,EAAa+B,WAChB,IAAK/F,KAAKQ,OAASR,KAAKqE,gBAAiB,CACvC,K,CAIF3D,EAAGyD,iBACHzD,EAAG0D,kBACHpE,KAAKQ,KAAO,MACZR,KAAK0D,W,CAIX,WAAAsC,CAAAC,G,wEA5TQjG,KAAAC,MAAmD,G,oCAtC/C,K,UAIL,M,qBAOW,M,mBAOF,E,mDAiVdD,KAAKM,OAASN,KAAKM,OAAOgC,KAAKtC,MAC/BA,KAAKuC,aAAevC,KAAKuC,aAAaD,KAAKtC,MAC3CA,KAAKS,kBAAoBT,KAAKS,kBAAkB6B,KAAKtC,MACrDA,KAAK6D,aAAe7D,KAAK6D,aAAavB,KAAKtC,MAC3CA,KAAKiD,cAAgBjD,KAAKiD,cAAcX,KAAKtC,MAC7CA,KAAK8D,eAAiB9D,KAAK8D,eAAexB,KAAKtC,K,CAGjD,iBAAAkG,GACElG,KAAKiB,oBACLjB,KAAKiD,e,CAGP,MAAAkD,GACE,IAAKnG,KAAKO,WAAY,CACpB,OACE6F,EAAA,OAAKC,MAAM,cACTD,EAAA,QAAME,aAActG,KAAKS,oB,CAK/B,OACE2F,EAACG,EAAI,KACHH,EAAA,UACEI,IAAM5G,GAAQI,KAAKwE,YAAc5E,EACjCyG,MAAM,aAAY,gBACH,KAAKrG,KAAKQ,OAAM,gBAChB,GAAGR,KAAKO,aAAY,aACvBP,KAAKQ,KAAO,cAAgB,YACxC0E,KAAK,WACL7E,SAAUL,KAAKI,aACfqG,QAASzG,KAAK6D,aACdyB,UAAWtF,KAAK8D,gBAEhBsC,EAAA,QAAME,aAActG,KAAKS,oBACzB2F,EAAA,UAAQM,KAAM1G,KAAKQ,KAAO,aAAe,kBAG3C4F,EAAA,OACEC,MAAM,UACNG,IAAM5G,GAAQI,KAAKqB,QAAUzB,GAE5BI,KAAKwC,WACJ4D,EAAA,UAAQC,MAAM,UACZD,EAAA,QACEM,KAAK,SACLJ,aAActG,KAAKuC,gBAKzB6D,EAAA,OACEC,MAAM,QACNnB,KAAK,QAELkB,EAAA,QACEM,KAAK,OACLJ,aAActG,KAAKiD,kB","ignoreList":[]}

package/www/build/{p-ae0a33a2.css → p-d9dbe303.css}

@@ -167,41 +167,31 @@
   --font-size-15: 4.75rem; /* 76px */
   --font-size-16: 5.25rem; /* 84px */
   --font-size-17: 5.75rem; /* 92px */
+
+  /* cssprops to use with `font` shorthand property */
+  --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);
+  --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);
+  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);
+  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);
+  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);
+  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);
 }
 
 /* Typography classes */
 .heading-1,
 .heading-1-sb,
 .heading-1-lt {
-  font-size: var(--font-size-8);
+  font-size: var(--font-size-7);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
-  line-height: 1.25;
+  line-height: 1.28;
 }
 
 .heading-2,
 .heading-2-sb,
 .heading-2-lt {
-  font-size: var(--font-size-7);
+  font-size: var(--font-size-6);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
-  line-height: 1.28;
-}
-
-@media (max-width: 1151px) {
-  .heading-1,
-  .heading-1-sb,
-  .heading-1-lt {
-    font-size: var(--font-size-7);
-    line-height: 1.28;
-  }
-
-  .heading-2,
-  .heading-2-sb,
-  .heading-2-lt {
-    font-size: var(--font-size-6);
-    line-height: 1.333;
-  }
+  line-height: 1.333;
 }
 
 .heading-3,
@@ -209,7 +199,6 @@
 .heading-3-lt {
   font-size: var(--font-size-6);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
   line-height: 1.333;
 }
 
@@ -218,7 +207,6 @@
 .heading-4-lt {
   font-size: var(--font-size-5);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
   line-height: 1.4;
 }
 
@@ -226,7 +214,6 @@
 .body-1-sb {
   font-size: var(--font-size-5);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
   line-height: 1.4;
 }
 
@@ -234,7 +221,6 @@
 .body-2-sb {
   font-size: var(--font-size-4);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
   line-height: 1.5;
 }
 
@@ -242,7 +228,6 @@
 .body-3-sb {
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
   line-height: 1.5;
 }
 
@@ -266,7 +251,6 @@
 .interactive-1-sb {
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
   line-height: 1.5;
 }
 
@@ -295,6 +279,523 @@
   line-height: 1.333;
 }
 
+/* section title */
+.section-title-1 {
+  font: var(--section-title-1);
+}
+
+.section-title-2 {
+  font: var(--section-title-2);
+}
+
+.section-title-3 {
+  font: var(--section-title-3);
+}
+
+.section-title-4 {
+  font: var(--section-title-4);
+}
+
+.section-title-5 {
+  font: var(--section-title-5);
+}
+
+.section-title-6 {
+  font: var(--section-title-6);
+}
+
+/* heading-1/2 for desktop and wide viewports */
+@media (min-width: 1152px) {
+  .heading-1,
+  .heading-1-sb,
+  .heading-1-lt {
+    font-size: var(--font-size-8);
+    font-weight: var(--font-rg);
+    line-height: 1.25;
+  }
+
+  .heading-2,
+  .heading-2-sb,
+  .heading-2-lt {
+    font-size: var(--font-size-7);
+    font-weight: var(--font-rg);
+    line-height: 1.28;
+  }
+}
+
+/* viewport classes */
+@media (max-width: 767px) {
+  .mobile-heading-1,
+  .mobile-heading-1-sb,
+  .mobile-heading-1-lt {
+    font-size: var(--font-size-7);
+    font-weight: var(--font-rg);
+    line-height: 1.28;
+  }
+
+  .mobile-heading-2,
+  .mobile-heading-2-sb,
+  .mobile-heading-2-lt {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-rg);
+    line-height: 1.333;
+  }
+
+  .mobile-heading-3,
+  .mobile-heading-3-sb,
+  .mobile-heading-3-lt {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-rg);
+    line-height: 1.333;
+  }
+
+  .mobile-heading-4,
+  .mobile-heading-4-sb,
+  .mobile-heading-4-lt {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .mobile-body-1,
+  .mobile-body-1-sb {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .mobile-body-2,
+  .mobile-body-2-sb {
+    font-size: var(--font-size-4);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .mobile-body-3,
+  .mobile-body-3-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .mobile-body-4,
+  .mobile-body-4-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .mobile-body-5,
+  .mobile-body-5-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .mobile-interactive-1,
+  .mobile-interactive-1-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .mobile-interactive-2,
+  .mobile-interactive-2-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .mobile-interactive-3,
+  .mobile-interactive-3-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .mobile-section-title-1 {
+    font: var(--section-title-1);
+  }
+
+  .mobile-section-title-2 {
+    font: var(--section-title-2);
+  }
+
+  .mobile-section-title-3 {
+    font: var(--section-title-3);
+  }
+
+  .mobile-section-title-4 {
+    font: var(--section-title-4);
+  }
+
+  .mobile-section-title-5 {
+    font: var(--section-title-5);
+  }
+
+  .mobile-section-title-6 {
+    font: var(--section-title-6);
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1151px) {
+  .tablet-heading-1,
+  .tablet-heading-1-sb,
+  .tablet-heading-1-lt {
+    font-size: var(--font-size-7);
+    font-weight: var(--font-rg);
+    line-height: 1.28;
+  }
+
+  .tablet-heading-2,
+  .tablet-heading-2-sb,
+  .tablet-heading-2-lt {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-rg);
+    line-height: 1.333;
+  }
+
+  .tablet-heading-3,
+  .tablet-heading-3-sb,
+  .tablet-heading-3-lt {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-rg);
+    line-height: 1.333;
+  }
+
+  .tablet-heading-4,
+  .tablet-heading-4-sb,
+  .tablet-heading-4-lt {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .tablet-body-1,
+  .tablet-body-1-sb {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .tablet-body-2,
+  .tablet-body-2-sb {
+    font-size: var(--font-size-4);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .tablet-body-3,
+  .tablet-body-3-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .tablet-body-4,
+  .tablet-body-4-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .tablet-body-5,
+  .tablet-body-5-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .tablet-interactive-1,
+  .tablet-interactive-1-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .tablet-interactive-2,
+  .tablet-interactive-2-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .tablet-interactive-3,
+  .tablet-interactive-3-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .tablet-section-title-1 {
+    font: var(--section-title-1);
+  }
+
+  .tablet-section-title-2 {
+    font: var(--section-title-2);
+  }
+
+  .tablet-section-title-3 {
+    font: var(--section-title-3);
+  }
+
+  .tablet-section-title-4 {
+    font: var(--section-title-4);
+  }
+
+  .tablet-section-title-5 {
+    font: var(--section-title-5);
+  }
+
+  .tablet-section-title-6 {
+    font: var(--section-title-6);
+  }
+}
+
+@media (min-width: 1152px) and (max-width: 1365px) {
+  .desktop-heading-1,
+  .desktop-heading-1-sb,
+  .desktop-heading-1-lt {
+    font-size: var(--font-size-8);
+    font-weight: var(--font-rg);
+    line-height: 1.25;
+  }
+
+  .desktop-heading-2,
+  .desktop-heading-2-sb,
+  .desktop-heading-2-lt {
+    font-size: var(--font-size-7);
+    font-weight: var(--font-rg);
+    line-height: 1.28;
+  }
+
+  .desktop-heading-3,
+  .desktop-heading-3-sb,
+  .desktop-heading-3-lt {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-rg);
+    line-height: 1.333;
+  }
+
+  .desktop-heading-4,
+  .desktop-heading-4-sb,
+  .desktop-heading-4-lt {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .desktop-body-1,
+  .desktop-body-1-sb {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .desktop-body-2,
+  .desktop-body-2-sb {
+    font-size: var(--font-size-4);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .desktop-body-3,
+  .desktop-body-3-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .desktop-body-4,
+  .desktop-body-4-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .desktop-body-5,
+  .desktop-body-5-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .desktop-interactive-1,
+  .desktop-interactive-1-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .desktop-interactive-2,
+  .desktop-interactive-2-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .desktop-interactive-3,
+  .desktop-interactive-3-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .desktop-section-title-1 {
+    font: var(--section-title-1);
+  }
+
+  .desktop-section-title-2 {
+    font: var(--section-title-2);
+  }
+
+  .desktop-section-title-3 {
+    font: var(--section-title-3);
+  }
+
+  .desktop-section-title-4 {
+    font: var(--section-title-4);
+  }
+
+  .desktop-section-title-5 {
+    font: var(--section-title-5);
+  }
+
+  .desktop-section-title-6 {
+    font: var(--section-title-6);
+  }
+}
+
+@media (min-width: 1366px) {
+  .wide-heading-1,
+  .wide-heading-1-sb,
+  .wide-heading-1-lt {
+    font-size: var(--font-size-8);
+    font-weight: var(--font-rg);
+    line-height: 1.25;
+  }
+
+  .wide-heading-2,
+  .wide-heading-2-sb,
+  .wide-heading-2-lt {
+    font-size: var(--font-size-7);
+    font-weight: var(--font-rg);
+    line-height: 1.28;
+  }
+
+  .wide-heading-3,
+  .wide-heading-3-sb,
+  .wide-heading-3-lt {
+    font-size: var(--font-size-6);
+    font-weight: var(--font-rg);
+    line-height: 1.333;
+  }
+
+  .wide-heading-4,
+  .wide-heading-4-sb,
+  .wide-heading-4-lt {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .wide-body-1,
+  .wide-body-1-sb {
+    font-size: var(--font-size-5);
+    font-weight: var(--font-rg);
+    line-height: 1.4;
+  }
+
+  .wide-body-2,
+  .wide-body-2-sb {
+    font-size: var(--font-size-4);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .wide-body-3,
+  .wide-body-3-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .wide-body-4,
+  .wide-body-4-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .wide-body-5,
+  .wide-body-5-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .wide-interactive-1,
+  .wide-interactive-1-sb {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-rg);
+    line-height: 1.5;
+  }
+
+  .wide-interactive-2,
+  .wide-interactive-2-sb {
+    font-size: var(--font-size-2);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.16px;
+    line-height: 1.4;
+  }
+
+  .wide-interactive-3,
+  .wide-interactive-3-sb {
+    font-size: var(--font-size-1);
+    font-weight: var(--font-rg);
+    letter-spacing: 0.32px;
+    line-height: 1.333;
+  }
+
+  .wide-section-title-1 {
+    font: var(--section-title-1);
+  }
+
+  .wide-section-title-2 {
+    font: var(--section-title-2);
+  }
+
+  .wide-section-title-3 {
+    font: var(--section-title-3);
+  }
+
+  .wide-section-title-4 {
+    font: var(--section-title-4);
+  }
+
+  .wide-section-title-5 {
+    font: var(--section-title-5);
+  }
+
+  .wide-section-title-6 {
+    font: var(--section-title-6);
+  }
+}
+
 /* font-weight variants */
 .heading-1-lt,
 .heading-2-lt,