@swisspost/design-system-components 1.3.2 → 1.3.4

package/dist/collection/components/post-collapsible/post-collapsible.css

@@ -177,7 +177,7 @@
   --bs-body-font-family: Frutiger Neue For Post, system-ui, sans-serif;
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
-  --bs-body-line-height: 1.4;
+  --bs-body-line-height: 1.5;
   --bs-body-color: #000;
   --bs-body-bg: #fff;
   --bs-border-width: 1px;
@@ -256,7 +256,7 @@ h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-family: inherit;
-  font-weight: 300;
+  font-weight: 700;
   line-height: 1.2;
   color: inherit;
 }
@@ -746,7 +746,6 @@ progress {
  */
 .blockquote-footer cite {
   font-size: 0.9375rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
   .blockquote-footer cite {
@@ -763,7 +762,6 @@ progress {
 .text-body .h5,
 .text-body p {
   font-size: 1.0625rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
   .blockquote p, .text-body h5,
@@ -778,7 +776,6 @@ progress {
 .text-body h4,
 .text-body .h4 {
   font-size: 1.25rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
   .text-body h3,
@@ -786,7 +783,6 @@ progress {
   .text-body h4,
   .text-body .h4 {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 @media (min-width: 1441px) {
@@ -801,7 +797,6 @@ progress {
 .text-body h2,
 .text-body .h2 {
   font-size: 1.5rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
   .text-body h2,
@@ -825,7 +820,6 @@ progress {
 .text-body h1,
 .text-body .h1 {
   font-size: 1.75rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
   .text-body h1,
@@ -854,44 +848,20 @@ progress {
   margin-bottom: 0.8em;
 }
 
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  font-weight: 700;
-}
-
-h6,
-.h6,
 .font-curve-tiny {
   font-size: 0.8125rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
-  h6,
-  .h6,
   .font-curve-tiny {
     font-size: 0.9375rem;
   }
 }
 @media (min-width: 1024px) {
-  h6,
-  .h6,
   .font-curve-tiny {
     font-size: 1rem;
   }
 }
 @media (min-width: 1441px) {
-  h6,
-  .h6,
   .font-curve-tiny {
     font-size: 1.0625rem;
   }
@@ -899,7 +869,6 @@ h6,
 
 .font-curve-small {
   font-size: 0.9375rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
   .font-curve-small {
@@ -914,7 +883,6 @@ h6,
 
 .font-curve-regular {
   font-size: 1.0625rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
   .font-curve-regular {
@@ -922,112 +890,250 @@ h6,
   }
 }
 
-h5,
-.h5,
 .font-curve-bigger-regular {
   font-size: 1.0625rem;
-  line-height: 1.4;
 }
 @media (min-width: 600px) {
-  h5,
-  .h5,
   .font-curve-bigger-regular {
     font-size: 1.25rem;
   }
 }
 @media (min-width: 1024px) {
-  h5,
-  .h5,
   .font-curve-bigger-regular {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 
-h3,
-.h3,
-h4,
-.h4,
 .font-curve-medium {
   font-size: 1.25rem;
-  line-height: 1.4;
 }
 @media (min-width: 1024px) {
-  h3,
-  .h3,
-  h4,
-  .h4,
   .font-curve-medium {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 @media (min-width: 1441px) {
-  h3,
-  .h3,
-  h4,
-  .h4,
   .font-curve-medium {
     font-size: 1.75rem;
   }
 }
 
-h2,
-.h2,
 .font-curve-large {
   font-size: 1.5rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
-  h2,
-  .h2,
   .font-curve-large {
     font-size: 1.75rem;
   }
 }
 @media (min-width: 1024px) {
-  h2,
-  .h2,
   .font-curve-large {
     font-size: 2rem;
   }
 }
 @media (min-width: 1441px) {
-  h2,
-  .h2,
   .font-curve-large {
     font-size: 2.5rem;
   }
 }
 
-h1,
-.h1,
 .font-curve-big {
   font-size: 1.75rem;
-  line-height: 1.1;
 }
 @media (min-width: 600px) {
-  h1,
-  .h1,
   .font-curve-big {
     font-size: 2rem;
   }
 }
 @media (min-width: 1024px) {
-  h1,
-  .h1,
   .font-curve-big {
     font-size: 2.5rem;
   }
 }
 @media (min-width: 1441px) {
-  h1,
-  .h1,
   .font-curve-big {
     font-size: 3rem;
   }
 }
 
+h1,
+.h1 {
+  font-size: 1.75rem;
+}
+@media (min-width: 400px) {
+  h1,
+  .h1 {
+    font-size: 2rem;
+  }
+}
+@media (min-width: 780px) {
+  h1,
+  .h1 {
+    font-size: 2.5rem;
+  }
+}
+@media (min-width: 1441px) {
+  h1,
+  .h1 {
+    font-size: 3rem;
+  }
+}
+
+h2,
+.h2 {
+  font-size: 1.5rem;
+}
+@media (min-width: 400px) {
+  h2,
+  .h2 {
+    font-size: 1.75rem;
+  }
+}
+@media (min-width: 780px) {
+  h2,
+  .h2 {
+    font-size: 2rem;
+  }
+}
+@media (min-width: 1441px) {
+  h2,
+  .h2 {
+    font-size: 2.5rem;
+  }
+}
+
+h3,
+.h3 {
+  font-size: 1.125rem;
+}
+@media (min-width: 400px) {
+  h3,
+  .h3 {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 780px) {
+  h3,
+  .h3 {
+    font-size: 1.5rem;
+  }
+}
+@media (min-width: 1441px) {
+  h3,
+  .h3 {
+    font-size: 1.75rem;
+  }
+}
+
+h4,
+.h4 {
+  font-size: 1rem;
+}
+@media (min-width: 400px) {
+  h4,
+  .h4 {
+    font-size: 1.125rem;
+  }
+}
+@media (min-width: 780px) {
+  h4,
+  .h4 {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 1441px) {
+  h4,
+  .h4 {
+    font-size: 1.5rem;
+  }
+}
+
+h5,
+.h5 {
+  font-size: 0.875rem;
+}
+@media (min-width: 400px) {
+  h5,
+  .h5 {
+    font-size: 1rem;
+  }
+}
+@media (min-width: 780px) {
+  h5,
+  .h5 {
+    font-size: 1.125rem;
+  }
+}
+@media (min-width: 1441px) {
+  h5,
+  .h5 {
+    font-size: 1.25rem;
+  }
+}
+
+h6,
+.h6 {
+  font-size: 0.875rem;
+}
+@media (min-width: 780px) {
+  h6,
+  .h6 {
+    font-size: 1rem;
+  }
+}
+@media (min-width: 1441px) {
+  h6,
+  .h6 {
+    font-size: 1.125rem;
+  }
+}
+
+.font-size-14 {
+  font-size: 0.875rem;
+}
+
+.font-size-16 {
+  font-size: 1rem;
+}
+
+.font-size-18 {
+  font-size: 1.125rem;
+}
+
+.font-size-20 {
+  font-size: 1.25rem;
+}
+
+.font-size-24 {
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+
+.font-size-28 {
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+.font-size-32 {
+  font-size: 2rem;
+  line-height: 1.2;
+}
+
+.font-size-40 {
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
+.font-size-48 {
+  font-size: 3rem;
+  line-height: 1.2;
+}
+
+.font-size-56 {
+  font-size: 3.5rem;
+  line-height: 1.2;
+}
+
 .blockquote {
   margin-top: 1.5rem;
 }
@@ -1107,7 +1213,6 @@ q:lang(en) {
 }
 .text-body .lead {
   font-size: 1.0625rem;
-  line-height: 1.4;
   margin-bottom: 0.8em;
 }
 @media (min-width: 600px) {
@@ -1118,7 +1223,6 @@ q:lang(en) {
 @media (min-width: 1024px) {
   .text-body .lead {
     font-size: 1.5rem;
-    line-height: 1.1;
   }
 }
 
@@ -2482,15 +2586,15 @@ code {
 }
 
 .lh-sm {
-  line-height: 1.25 !important;
+  line-height: 1.2 !important;
 }
 
 .lh-base {
-  line-height: 1.4 !important;
+  line-height: 1.5 !important;
 }
 
 .lh-lg {
-  line-height: 2 !important;
+  line-height: 1.5 !important;
 }
 
 .text-start {
@@ -14406,10 +14510,9 @@ a:focus, a:hover {
 
 .accordion-button {
   font-size: 1.0625rem;
-  line-height: 1.4;
   background-color: transparent;
   font-weight: 700;
-  line-height: 1.5rem;
+  line-height: 1.5;
 }
 @media (min-width: 1024px) {
   .accordion-button {
@@ -14450,7 +14553,6 @@ a:focus, a:hover {
 .accordion-body h5,
 .accordion-body h6 {
   font-size: 1.0625rem;
-  line-height: 1.4;
   margin-top: 2.5rem;
   margin-bottom: 0;
   font-weight: 700;

package/dist/collection/components/post-collapsible/post-collapsible.js

@@ -1,5 +1,6 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';
+import { version } from '../../../package.json';
 let nextId = 0;
 export class PostCollapsible {
   constructor() {
@@ -73,7 +74,7 @@ export class PostCollapsible {
     if (!this.hasHeader) {
       return (h("div", { id: `${this.collapsibleId}--collapse`, class: this.collapseClasses, style: { height: this.collapseHeight } }, h("slot", null)));
     }
-    return (h("div", { class: "accordion-item" }, h(this.headingTag, { class: "accordion-header", id: `${this.collapsibleId}--header` }, h("button", { class: `accordion-button ${this.isOpen ? '' : 'collapsed'}`, type: "button", "aria-expanded": `${this.isOpen}`, "aria-controls": `${this.collapsibleId}--collapse`, onClick: this.onAccordionButtonClick }, h("slot", { name: "header" }))), h("div", { id: `${this.collapsibleId}--collapse`, class: `accordion-collapse ${this.collapseClasses}`, style: { height: this.collapseHeight }, "aria-labelledby": `${this.collapsibleId}--header` }, h("div", { class: "accordion-body" }, h("slot", null)))));
+    return (h(Host, { "data-version": version }, h("div", { class: "accordion-item" }, h(this.headingTag, { class: "accordion-header", id: `${this.collapsibleId}--header` }, h("button", { class: `accordion-button ${this.isOpen ? '' : 'collapsed'}`, type: "button", "aria-expanded": `${this.isOpen}`, "aria-controls": `${this.collapsibleId}--collapse`, onClick: this.onAccordionButtonClick }, h("slot", { name: "header" }))), h("div", { id: `${this.collapsibleId}--collapse`, class: `accordion-collapse ${this.collapseClasses}`, style: { height: this.collapseHeight }, "aria-labelledby": `${this.collapsibleId}--header` }, h("div", { class: "accordion-body" }, h("slot", null))))));
   }
   static get is() { return "post-collapsible"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/post-collapsible/post-collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-collapsible.js","sourceRoot":"","sources":["../../../src/components/post-collapsible/post-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private collapsibleElement: HTMLElement;\n  private isLoaded = false;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() collapseClasses: string;\n  @State() collapseHeight: string | null = null;\n  @State() collapsibleId: string;\n  @State() hasHeader: boolean;\n  @State() headingTag: string | undefined;\n  @State() isOpen = true;\n  @State() onAccordionButtonClick = () => this.toggle();\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkType(newValue, 'boolean', 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n    if (!this.isLoaded) {\n      this.isOpen = !newValue;\n      this.collapseClasses = this.getCollapseClasses();\n    } else {\n      setTimeout(() => {\n        this.toggle(!newValue);\n      });\n    }\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: number = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkOneOf(\n      newValue,\n      [ 1, 2, 3, 4, 5, 6 ],\n      'The post-collapsible element requires a heading level between 1 and 6.',\n    );\n\n    this.headingTag = `h${newValue}`;\n  }\n\n  componentWillLoad() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    if (!this.hasHeader) {\n      console.warn('Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility');\n    }\n\n    this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n    this.collapseClasses = this.getCollapseClasses();\n  }\n\n  componentDidLoad() {\n    this.isLoaded = true;\n    this.collapsibleElement = this.host.shadowRoot.querySelector(`#${this.collapsibleId}--collapse`);\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open !== this.isOpen) {\n      this.isOpen = !this.isOpen;\n\n      this.startTransition();\n\n      await onTransitionEnd(this.collapsibleElement).then(() => {\n        this.collapseHeight = null;\n        this.collapseClasses = this.getCollapseClasses();\n      });\n\n      return this.isOpen;\n    }\n  }\n\n  private startTransition() {\n    const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n    this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n    this.collapseClasses = 'collapsing';\n\n    setTimeout(() => {\n      this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n    }, 50);\n  }\n\n  private getCollapseClasses() {\n    return this.isOpen ? 'collapse show' : 'collapse';\n  }\n\n  render() {\n    if (!this.hasHeader) {\n      return (\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={this.collapseClasses}\n          style={{ height: this.collapseHeight }}\n        >\n          <slot/>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"accordion-item\">\n        <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n          <button\n            class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n            type=\"button\"\n            aria-expanded={`${this.isOpen}`}\n            aria-controls={`${this.collapsibleId}--collapse`}\n            onClick={this.onAccordionButtonClick}\n          >\n            <slot name=\"header\"/>\n          </button>\n        </this.headingTag>\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={`accordion-collapse ${this.collapseClasses}`}\n          style={{ height: this.collapseHeight }}\n          aria-labelledby={`${this.collapsibleId}--header`}\n        >\n          <div class=\"accordion-body\">\n            <slot/>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"post-collapsible.js","sourceRoot":"","sources":["../../../../src/components/post-collapsible/post-collapsible.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { checkOneOf, checkType, getElementHeight, onTransitionEnd } from '../../utils';\nimport { version } from '../../../package.json';\n\nlet nextId = 0;\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private collapsibleElement: HTMLElement;\n  private isLoaded = false;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() collapseClasses: string;\n  @State() collapseHeight: string | null = null;\n  @State() collapsibleId: string;\n  @State() hasHeader: boolean;\n  @State() headingTag: string | undefined;\n  @State() isOpen = true;\n  @State() onAccordionButtonClick = () => this.toggle();\n\n  /**\n   * If `true`, the element is initially collapsed otherwise it is displayed.\n   */\n  @Prop() readonly collapsed?: boolean = false;\n\n  @Watch('collapsed')\n  validateCollapsed(newValue = this.collapsed) {\n    checkType(newValue, 'boolean', 'The post-collapsible \"collapsed\" prop should be a boolean.');\n\n    if (!this.isLoaded) {\n      this.isOpen = !newValue;\n      this.collapseClasses = this.getCollapseClasses();\n    } else {\n      setTimeout(() => {\n        this.toggle(!newValue);\n      });\n    }\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: number = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkOneOf(\n      newValue,\n      [1, 2, 3, 4, 5, 6],\n      'The post-collapsible element requires a heading level between 1 and 6.',\n    );\n\n    this.headingTag = `h${newValue}`;\n  }\n\n  componentWillLoad() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    if (!this.hasHeader) {\n      console.warn(\n        'Be sure to bind the post-collapsible to its control using aria-controls and aria-expanded attributes. More information here: https://getbootstrap.com/docs/5.2/components/collapse/#accessibility',\n      );\n    }\n\n    this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;\n    this.collapseClasses = this.getCollapseClasses();\n  }\n\n  componentDidLoad() {\n    this.isLoaded = true;\n    this.collapsibleElement = this.host.shadowRoot.querySelector(\n      `#${this.collapsibleId}--collapse`,\n    );\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open !== this.isOpen) {\n      this.isOpen = !this.isOpen;\n\n      this.startTransition();\n\n      await onTransitionEnd(this.collapsibleElement).then(() => {\n        this.collapseHeight = null;\n        this.collapseClasses = this.getCollapseClasses();\n      });\n\n      return this.isOpen;\n    }\n  }\n\n  private startTransition() {\n    const expandedHeight = getElementHeight(this.collapsibleElement, 'show');\n\n    this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;\n    this.collapseClasses = 'collapsing';\n\n    setTimeout(() => {\n      this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;\n    }, 50);\n  }\n\n  private getCollapseClasses() {\n    return this.isOpen ? 'collapse show' : 'collapse';\n  }\n\n  render() {\n    if (!this.hasHeader) {\n      return (\n        <div\n          id={`${this.collapsibleId}--collapse`}\n          class={this.collapseClasses}\n          style={{ height: this.collapseHeight }}\n        >\n          <slot />\n        </div>\n      );\n    }\n\n    return (\n      <Host data-version={version}>\n        <div class=\"accordion-item\">\n          <this.headingTag class=\"accordion-header\" id={`${this.collapsibleId}--header`}>\n            <button\n              class={`accordion-button ${this.isOpen ? '' : 'collapsed'}`}\n              type=\"button\"\n              aria-expanded={`${this.isOpen}`}\n              aria-controls={`${this.collapsibleId}--collapse`}\n              onClick={this.onAccordionButtonClick}\n            >\n              <slot name=\"header\" />\n            </button>\n          </this.headingTag>\n          <div\n            id={`${this.collapsibleId}--collapse`}\n            class={`accordion-collapse ${this.collapseClasses}`}\n            style={{ height: this.collapseHeight }}\n            aria-labelledby={`${this.collapsibleId}--header`}\n          >\n            <div class=\"accordion-body\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-icon/post-icon.css

@@ -10,43 +10,43 @@ svg {
   fill: currentColor;
 }
 
-:host([flip-h]) svg {
+:host([flip-h]:not([flip-h=false])) svg {
   scale: -1 1;
 }
 
-:host([flip-v]) svg {
+:host([flip-v]:not([flip-v=false])) svg {
   scale: 1 -1;
 }
 
-:host([flip-h][flip-v]) svg {
+:host([flip-h][flip-v]:not([flip-h=false], [flip-v=false])) svg {
   scale: -1;
 }
 
-:host([animation]) svg {
+:host([animation]) {
   transform-origin: center;
 }
 
-:host([animation=cylon]) svg {
+:host([animation=cylon]) {
   animation: icon-animation-cylon 0.75s ease-in-out infinite alternate;
 }
 
-:host([animation=cylon-vertical]) svg {
+:host([animation=cylon-vertical]) {
   animation: icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate;
 }
 
-:host([animation=spin]) svg {
+:host([animation=spin]) {
   animation: icon-animation-spin 2s linear infinite normal;
 }
 
-:host([animation=spin-reverse]) svg {
+:host([animation=spin-reverse]) {
   animation: icon-animation-spin 2s linear infinite reverse;
 }
 
-:host([animation=fade]) svg {
+:host([animation=fade]) {
   animation: icon-animation-fade 0.75s ease-in-out infinite alternate;
 }
 
-:host([animation=throb]) svg {
+:host([animation=throb]) {
   animation: icon-animation-throb 0.75s ease-in-out infinite alternate;
 }