@swisspost/design-system-components 1.5.0 → 1.6.0

package/dist/cjs/post-collapsible-7c9d23a2.js.map

@@ -0,0 +1 @@
+{"file":"post-collapsible-7c9d23a2.js","mappings":"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","names":["checkEmptyOrType","checkEmptyOrOneOf","h","Host","version"],"sources":["src/utils/is-motion-reduced.ts","src/animations/collapse.ts","src/components/post-collapsible/heading-levels.ts","src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function isMotionReduced(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","const collapseDuration = 350;\nconst collapseEasing = 'ease';\nconst collapsedKeyframe: Keyframe = { height: '0', overflow: 'hidden' };\n\nexport const collapse = (el: HTMLElement): Animation => {\n  const { height } = window.getComputedStyle(el);\n  const expandedKeyframe: Keyframe = { height };\n\n  return el.animate(\n    [expandedKeyframe, collapsedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n\nexport const expand = (el: HTMLElement): Animation => {\n  const expandedKeyframe: Keyframe = { height: `${el.scrollHeight}px` };\n\n  return el.animate(\n    [collapsedKeyframe, expandedKeyframe],\n    { duration: collapseDuration, easing: collapseEasing, fill: 'forwards' },\n  );\n};\n","export const HEADING_LEVELS = [1, 2, 3, 4, 5, 6] as const;\n\nexport type HeadingLevel = typeof HEADING_LEVELS[number];\n","@use '@swisspost/design-system-styles/components/accordion';\n\n:host {\n  display: block;\n\n  .accordion-button > ::slotted(.text-truncate) {\n    display: block;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { collapse, expand } from '../../animations/collapse';\nimport { checkEmptyOrOneOf, checkEmptyOrType, isMotionReduced } from '../../utils';\nimport { HEADING_LEVELS, HeadingLevel } from './heading-levels';\n\n@Component({\n  tag: 'post-collapsible',\n  styleUrl: 'post-collapsible.scss',\n  shadow: true,\n})\nexport class PostCollapsible {\n  private isLoaded = false;\n  private collapsible: HTMLElement;\n\n  @Element() host: HTMLPostCollapsibleElement;\n\n  @State() id: string;\n  @State() isOpen = true;\n  @State() hasHeader: boolean;\n  @State() headingTag: string;\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    checkEmptyOrType(newValue, 'boolean', 'The `collapsed` property of the `post-collapsible` must be a boolean.');\n  }\n\n  /**\n   * Defines the hierarchical level of the collapsible header within the headings structure.\n   */\n  @Prop() readonly headingLevel?: HeadingLevel = 2;\n\n  @Watch('headingLevel')\n  validateHeadingLevel(newValue = this.headingLevel) {\n    checkEmptyOrOneOf(newValue, HEADING_LEVELS, 'The `headingLevel` property of the `post-collapsible` must be a number between 1 and 6.');\n  }\n\n  /**\n   * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.\n   */\n  @Event() collapseChange: EventEmitter<void>;\n\n  connectedCallback() {\n    this.validateCollapsed();\n    this.validateHeadingLevel();\n  }\n\n  componentWillRender() {\n    this.id = this.host.id || `c${crypto.randomUUID()}`;\n    this.hasHeader = this.host.querySelectorAll('[slot=\"header\"]').length > 0;\n    this.headingTag = `h${this.headingLevel ?? 2}`;\n  }\n\n  componentDidLoad() {\n    if (this.collapsed) void this.toggle(false);\n    this.isLoaded = true;\n  }\n\n  /**\n   * Triggers the collapse programmatically.\n   *\n   * If there is a collapsing transition running already, it will be reversed.\n   */\n  @Method()\n  async toggle(open = !this.isOpen): Promise<boolean> {\n    if (open === this.isOpen) return open;\n\n    this.isOpen = !this.isOpen;\n    if (this.isLoaded) this.collapseChange.emit();\n\n    const animation = open ? expand(this.collapsible): collapse(this.collapsible);\n\n    if (!this.isLoaded || isMotionReduced()) animation.finish();\n\n    await animation.finished;\n\n    animation.commitStyles();\n\n    return this.isOpen;\n  }\n\n  render() {\n    const collapse = (\n      <div\n        aria-labelledby={this.hasHeader ? `${this.id}--header` : undefined}\n        class={`collapse${this.hasHeader ? ' accordion-collapse' : ''}`}\n        id={`${this.id}--collapse`}\n        ref={el => this.collapsible = el}\n      >\n        {this.hasHeader ? (\n          <div class=\"accordion-body\">\n            <slot/>\n          </div>\n        ) : (\n          <slot/>\n        )}\n      </div>\n    );\n\n    return (\n      <Host id={this.id} data-version={version}>\n        {this.hasHeader ? (\n          <div class=\"accordion-item\">\n            <this.headingTag class=\"accordion-header\" id={`${this.id}--header`}>\n              <button\n                aria-controls={`${this.id}--collapse`}\n                aria-expanded={`${this.isOpen}`}\n                class={`accordion-button${this.isOpen ? '' : ' collapsed'}`}\n                onClick={() => this.toggle()}\n                type=\"button\"\n              >\n                <slot name=\"header\"/>\n              </button>\n            </this.headingTag>\n\n            {collapse}\n          </div>\n        ) : collapse}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/post-collapsible.cjs.entry.js

@@ -2,127 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-12cc37c9.js');
-const checkOneOf = require('./check-one-of-4c2e8b2e.js');
-const checkType = require('./check-type-508a21a5.js');
-const _package = require('./package-67091813.js');
+const postCollapsible = require('./post-collapsible-7c9d23a2.js');
+require('./index-b619e205.js');
+require('./package-7c4db872.js');
+require('./index-b38a23e0.js');
+require('./constants-238701d3.js');
+require('./check-one-of-27ad3154.js');
 
-function getElementHeight(el, classesWhenShown = []) {
-  if (!Array.isArray(classesWhenShown))
-    classesWhenShown = [classesWhenShown];
-  const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));
-  if (classesToAdd.length)
-    el.classList.add(...classesToAdd);
-  const scrollHeight = el.scrollHeight;
-  if (classesToAdd.length)
-    el.classList.remove(...classesToAdd);
-  return scrollHeight;
-}
 
-function shouldReduceMotion() {
-  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
 
-async function onTransitionEnd(el) {
-  return new Promise(resolve => {
-    if (shouldReduceMotion()) {
-      resolve();
-    }
-    else {
-      el.ontransitionend = () => {
-        resolve();
-        el.ontransitionend = null;
-      };
-    }
-  });
-}
-
-const postCollapsibleCss = ".accordion-item{border-block-start:2px solid hsl(0, 0%, 90%)}.accordion-header{font-size:1.0625rem;font-weight:700;line-height:1.5;margin:0}@media (min-width: 1024px){.accordion-header{font-size:1.25rem}}.accordion-button{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;user-select:none;appearance:button;width:100%;position:relative;padding-block:1rem;padding-inline-start:1rem;padding-inline-end:2.5rem;text-align:start}.accordion-button:not(:disabled){cursor:pointer}.accordion-button:disabled{opacity:0.4}.accordion-button:focus{outline:none;box-shadow:0 0 0 0.125rem rgba(51, 51, 51, 0.25)}.accordion-button::after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xml:space='preserve' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6 7.6 7.6z'/%3E%3C/g%3E%3C/svg%3E\");background-color:currentColor;content:\"\";display:block;height:1.5rem;width:1.5rem;position:absolute;inset-inline-end:1rem;inset-block-start:50%;transform:translateY(-50%);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);border:1px solid rgb(var(--post-bg-rgb, 255, 255, 255))}.accordion-button.collapsed::after{transform:translateY(-50%) rotate(-180deg)}.accordion-button>.text-truncate{display:block}@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black){.accordion-button:hover:not(:disabled),.accordion-button:focus-visible:not(:disabled){outline:2px solid Highlight}.accordion-button:disabled{opacity:1 !important}}.accordion-body{padding:0.75rem 1rem 2.5rem;border-block-start:2px solid hsl(0, 0%, 90%)}.accordion-body h1,.accordion-body .h1{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h1,.accordion-body .h1{font-size:1.25rem}}.accordion-body h2,.accordion-body .h2{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h2,.accordion-body .h2{font-size:1.25rem}}.accordion-body h3,.accordion-body .h3{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h3,.accordion-body .h3{font-size:1.25rem}}.accordion-body h4,.accordion-body .h4{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h4,.accordion-body .h4{font-size:1.25rem}}.accordion-body h5,.accordion-body .h5{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h5,.accordion-body .h5{font-size:1.25rem}}.accordion-body h6,.accordion-body .h6{font-size:1.0625rem;margin:2.5rem 0 0;font-weight:700}@media (min-width: 1024px){.accordion-body h6,.accordion-body .h6{font-size:1.25rem}}.accordion-button>:first-child,.accordion-body>:first-child{margin-block-start:0 !important}.accordion-button>:last-child,.accordion-body>:last-child{margin-block-end:0 !important}/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */.fade{transition:opacity 200ms linear}@media (prefers-reduced-motion: reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height 250ms cubic-bezier(0.4, 0, 0.2, 1), padding 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media (prefers-reduced-motion: reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width 0.35s ease}@media (prefers-reduced-motion: reduce){.collapsing.collapse-horizontal{transition:none}}:host{display:block}:host .accordion-button>::slotted(.text-truncate){display:block}";
-
-let nextId = 0;
-const PostCollapsible = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.isLoaded = false;
-    this.collapseClasses = undefined;
-    this.collapseHeight = null;
-    this.collapsibleId = undefined;
-    this.hasHeader = undefined;
-    this.headingTag = undefined;
-    this.isOpen = true;
-    this.onAccordionButtonClick = () => this.toggle();
-    this.collapsed = false;
-    this.headingLevel = 2;
-  }
-  validateCollapsed(newValue = this.collapsed) {
-    checkType.checkType(newValue, 'boolean', 'The post-collapsible "collapsed" prop should be a boolean.');
-    if (!this.isLoaded) {
-      this.isOpen = !newValue;
-      this.collapseClasses = this.getCollapseClasses();
-    }
-    else {
-      setTimeout(() => {
-        this.toggle(!newValue);
-      });
-    }
-  }
-  validateHeadingLevel(newValue = this.headingLevel) {
-    checkOneOf.checkOneOf(newValue, [1, 2, 3, 4, 5, 6], 'The post-collapsible element requires a heading level between 1 and 6.');
-    this.headingTag = `h${newValue}`;
-  }
-  componentWillLoad() {
-    this.validateCollapsed();
-    this.validateHeadingLevel();
-    this.hasHeader = this.host.querySelectorAll('[slot="header"]').length > 0;
-    if (!this.hasHeader) {
-      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');
-    }
-    this.collapsibleId = this.host.id || `post-collapsible-${nextId++}`;
-    this.collapseClasses = this.getCollapseClasses();
-  }
-  componentDidLoad() {
-    this.isLoaded = true;
-    this.collapsibleElement = this.host.shadowRoot.querySelector(`#${this.collapsibleId}--collapse`);
-  }
-  /**
-   * Triggers the collapse programmatically.
-   */
-  async toggle(open = !this.isOpen) {
-    if (open !== this.isOpen) {
-      this.isOpen = !this.isOpen;
-      this.startTransition();
-      await onTransitionEnd(this.collapsibleElement).then(() => {
-        this.collapseHeight = null;
-        this.collapseClasses = this.getCollapseClasses();
-      });
-      return this.isOpen;
-    }
-  }
-  startTransition() {
-    const expandedHeight = getElementHeight(this.collapsibleElement, 'show');
-    this.collapseHeight = `${this.isOpen ? 0 : expandedHeight}px`;
-    this.collapseClasses = 'collapsing';
-    setTimeout(() => {
-      this.collapseHeight = `${this.isOpen ? expandedHeight : 0}px`;
-    }, 50);
-  }
-  getCollapseClasses() {
-    return this.isOpen ? 'collapse show' : 'collapse';
-  }
-  render() {
-    if (!this.hasHeader) {
-      return (index.h("div", { id: `${this.collapsibleId}--collapse`, class: this.collapseClasses, style: { height: this.collapseHeight } }, index.h("slot", null)));
-    }
-    return (index.h(index.Host, { "data-version": _package.version }, index.h("div", { class: "accordion-item" }, index.h(this.headingTag, { class: "accordion-header", id: `${this.collapsibleId}--header` }, index.h("button", { class: `accordion-button ${this.isOpen ? '' : 'collapsed'}`, type: "button", "aria-expanded": `${this.isOpen}`, "aria-controls": `${this.collapsibleId}--collapse`, onClick: this.onAccordionButtonClick }, index.h("slot", { name: "header" }))), index.h("div", { id: `${this.collapsibleId}--collapse`, class: `accordion-collapse ${this.collapseClasses}`, style: { height: this.collapseHeight }, "aria-labelledby": `${this.collapsibleId}--header` }, index.h("div", { class: "accordion-body" }, index.h("slot", null))))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "collapsed": ["validateCollapsed"],
-    "headingLevel": ["validateHeadingLevel"]
-  }; }
-};
-PostCollapsible.style = postCollapsibleCss;
-
-exports.post_collapsible = PostCollapsible;
+exports.post_collapsible = postCollapsible.PostCollapsible;
 
 //# sourceMappingURL=post-collapsible.cjs.entry.js.map

package/dist/cjs/post-collapsible.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-collapsible.entry.cjs.js","mappings":"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","names":["checkType","checkOneOf","h","Host","version"],"sources":["./src/utils/get-element-height.ts","./src/utils/should-reduce-motion.ts","./src/utils/on-transition-end.ts","./src/components/post-collapsible/post-collapsible.scss?tag=post-collapsible&encapsulation=shadow","./src/components/post-collapsible/post-collapsible.tsx"],"sourcesContent":["export function getElementHeight(el: HTMLElement): number;\nexport function getElementHeight(el: HTMLElement, classWhenShown: string): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;\nexport function getElementHeight(el: HTMLElement, classesWhenShown: string | string[] = []): number {\n  if (!Array.isArray(classesWhenShown)) classesWhenShown = [classesWhenShown];\n\n  const classesToAdd = classesWhenShown.filter(klass => !el.classList.contains(klass));\n  if (classesToAdd.length) el.classList.add(...classesToAdd);\n\n  const scrollHeight = el.scrollHeight;\n\n  if (classesToAdd.length) el.classList.remove(...classesToAdd);\n\n  return scrollHeight;\n}\n","export function shouldReduceMotion(): boolean {\n  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","import { shouldReduceMotion } from './should-reduce-motion';\n\nexport async function onTransitionEnd(el: HTMLElement): Promise<void> {\n  return new Promise(resolve => {\n    if (shouldReduceMotion()) {\n      resolve();\n    } else {\n      el.ontransitionend = () => {\n        resolve();\n        el.ontransitionend = null;\n      };\n    }\n  });\n}\n","@use '@swisspost/design-system-styles/components/accordion';\n@use '@swisspost/design-system-styles/components/transitions';\n\n:host {\n  display: block;\n\n  .accordion-button > ::slotted(.text-truncate) {\n    display: block;\n  }\n}\n","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"],"version":3}
+{"file":"post-collapsible.entry.cjs.js","mappings":";;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-components.cjs.js

@@ -2,25 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-12cc37c9.js');
+const index = require('./index-b619e205.js');
 
 /*
- Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.6.0 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('post-components.cjs.js', document.baseURI).href));
     const opts = {};
-    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
-        // TODO(STENCIL-661): Remove code related to the dynamic import shim
-        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     }
     return index.promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["post-alert.cjs",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]}]]],["post-collapsible.cjs",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"collapseClasses":[32],"collapseHeight":[32],"collapsibleId":[32],"hasHeader":[32],"headingTag":[32],"isOpen":[32],"onAccordionButtonClick":[32],"toggle":[64]}]]],["post-tab-header.cjs",[[1,"post-tab-header",{"panel":[1],"tabId":[32]}]]],["post-tab-panel.cjs",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs.cjs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-tooltip.cjs",[[1,"post-tooltip",{"backgroundColor":[1,"background-color"],"placement":[1],"tooltipClasses":[32],"show":[64],"hide":[64],"toggle":[64]}]]],["post-icon.cjs",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"svgStyles":[32],"svgOutput":[32]}]]]], options);
+  return index.bootstrapLazy([["post-alert.cjs",[[1,"post-alert",{"dismissible":[4],"dismissLabel":[1,"dismiss-label"],"fixed":[4],"icon":[1],"type":[1],"alertId":[32],"classes":[32],"hasActions":[32],"hasHeading":[32],"onDismissButtonClick":[32],"dismiss":[64]},null,{"dismissible":["validateDismissible"],"dismissLabel":["validateDismissLabel"],"fixed":["validateFixed"],"icon":["validateIcon"],"type":["validateType"]}]]],["post-accordion.cjs",[[1,"post-accordion",{"multiple":[4],"toggle":[64],"expandAll":[64],"collapseAll":[64]},[[0,"collapseChange","collapseChangeHandler"]]]]],["post-collapsible.cjs",[[1,"post-collapsible",{"collapsed":[4],"headingLevel":[2,"heading-level"],"id":[32],"isOpen":[32],"hasHeader":[32],"headingTag":[32],"toggle":[64]},null,{"collapsed":["validateCollapsed"],"headingLevel":["validateHeadingLevel"]}]]],["post-tab-header.cjs",[[1,"post-tab-header",{"panel":[1],"tabId":[32]},null,{"panel":["validateFor"]}]]],["post-tab-panel.cjs",[[1,"post-tab-panel",{"name":[1],"panelId":[32]}]]],["post-tabs.cjs",[[1,"post-tabs",{"activePanel":[1,"active-panel"],"show":[64]}]]],["post-tooltip.cjs",[[1,"post-tooltip",{"backgroundColor":[1,"background-color"],"placement":[1],"tooltipClasses":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"backgroundColor":["validateBackgroundColor"]}]]],["post-icon.cjs",[[1,"post-icon",{"animation":[1],"base":[1],"flipH":[4,"flip-h"],"flipV":[4,"flip-v"],"name":[1],"rotate":[2],"scale":[2],"svgStyles":[32],"svgOutput":[32]},null,{"animation":["validateAnimation"],"base":["validateBase"],"flipH":["validateFlipH"],"flipV":["validateFlipV"],"name":["validateName"],"rotate":["validateRotate"],"scale":["validateScale"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/post-components.cjs.js.map

@@ -1 +1 @@
-{"file":"post-components.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@3.4.2/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.4.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n    var _a, _b, _c;\n    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n    if (BUILD.cssVarShim) {\n        // shim css vars\n        // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n        plt.$cssShim$ = win.__cssshim;\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    if (BUILD.profile && !performance.mark) {\n        // not all browsers support performance.mark/measure (Safari 10)\n        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n        // simply stub the implementations out.\n        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n        // @ts-ignore\n        performance.mark = performance.measure = () => {\n            /*noop*/\n        };\n        performance.getEntriesByName = () => [];\n    }\n    // @ts-ignore\n    const scriptElm = \n    // TODO(STENCIL-661): Remove code related to the dynamic import shim\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n        // Safari < v11 support: This IF is true if it's Safari below v11.\n        // This fn cannot use async/await since Safari didn't support it until v11,\n        // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n        // so both the ESM file and nomodule file would get downloaded. Only Safari\n        // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n        return {\n            then() {\n                /* promise noop */\n            },\n        };\n    }\n    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    if (!BUILD.safari10 && importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n    }\n    else if (BUILD.dynamicImportShim || BUILD.safari10) {\n        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim) {\n            patchDynamicImport(opts.resourcesUrl, scriptElm);\n        }\n        // TODO(STENCIL-661): Remove code related to the dynamic import shim\n        if (BUILD.dynamicImportShim && !win.customElements) {\n            // module support, but no custom elements support (Old Edge)\n            // @ts-ignore\n            return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n        }\n    }\n    return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n    const importFunctionName = getDynamicImportFunction(NAMESPACE);\n    try {\n        // test if this browser supports dynamic imports\n        // There is a caching issue in V8, that breaks using import() in Function\n        // By generating a random string, we can workaround it\n        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n    }\n    catch (e) {\n        // this shim is specifically for browsers that do support \"esm\" imports\n        // however, they do NOT support \"dynamic\" imports\n        // basically this code is for old Edge, v18 and below\n        const moduleMap = new Map();\n        win[importFunctionName] = (src) => {\n            var _a;\n            const url = new URL(src, base).href;\n            let mod = moduleMap.get(url);\n            if (!mod) {\n                const script = doc.createElement('script');\n                script.type = 'module';\n                script.crossOrigin = orgScriptElm.crossOrigin;\n                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n                    type: 'application/javascript',\n                }));\n                // Apply CSP nonce to the script tag if it exists\n                const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n                if (nonce != null) {\n                    script.setAttribute('nonce', nonce);\n                }\n                mod = new Promise((resolve) => {\n                    script.onload = () => {\n                        resolve(win[importFunctionName].m);\n                        script.remove();\n                    };\n                });\n                moduleMap.set(url, mod);\n                doc.head.appendChild(script);\n            }\n            return mod;\n        };\n    }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"file":"post-components.cjs.js","mappings":";;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,iNAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@4.6.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.6.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n  globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/cjs/post-icon-f418f76a.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const index = require('./index-b619e205.js');
+const index$1 = require('./index-b38a23e0.js');
+const _package = require('./package-7c4db872.js');
+const checkNonEmpty = require('./check-non-empty-ae713942.js');
+
+const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon .75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical .75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade .75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb .75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
+
+const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
+const ANIMATION_NAMES = [
+  'cylon',
+  'cylon-vertical',
+  'spin',
+  'spin-reverse',
+  'fade',
+  'throb',
+];
+const ANIMATION_KEYS = [...ANIMATION_NAMES];
+const PostIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.svgStyles = undefined;
+    this.svgOutput = undefined;
+    this.animation = null;
+    this.base = null;
+    this.flipH = false;
+    this.flipV = false;
+    this.name = undefined;
+    this.rotate = null;
+    this.scale = null;
+  }
+  validateAnimation(newValue = this.animation) {
+    if (newValue !== undefined)
+      index$1.checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
+  }
+  validateBase(newValue = this.base) {
+    index$1.checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
+  }
+  validateFlipH(newValue = this.flipH) {
+    index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
+  }
+  validateFlipV(newValue = this.flipV) {
+    index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
+  }
+  validateName(newValue = this.name) {
+    checkNonEmpty.checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
+    index$1.checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
+  }
+  validateRotate(newValue = this.rotate) {
+    index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
+  }
+  validateScale(newValue = this.scale) {
+    index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
+  }
+  componentWillLoad() {
+    this.validateBase();
+    this.validateName();
+    this.validateFlipH();
+    this.validateFlipV();
+    this.validateScale();
+    this.validateRotate();
+    this.validateAnimation();
+  }
+  componentWillRender() {
+    this.setPath();
+  }
+  setPath() {
+    var _a, _b, _c, _d;
+    // Construct icon path from different possible sources
+    const metaBase = (_b = (_a = document.head
+      .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
+    const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
+    const fileName = `${this.name}.svg#icon`;
+    const filePath = `${fileBase}${fileName}`;
+    this.path = new URL(filePath, window.location.origin).toString();
+  }
+  render() {
+    // create inline styles for some properties
+    const svgStyles = Object.entries({
+      '-webkit-mask-image': `url('${this.path}')`,
+      'mask-image': `url('${this.path}')`,
+      'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
+      'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
+    })
+      .filter(([_key, value]) => value !== null)
+      .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+    return (index.h(index.Host, { "data-version": _package.version }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", style: svgStyles })));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "animation": ["validateAnimation"],
+    "base": ["validateBase"],
+    "flipH": ["validateFlipH"],
+    "flipV": ["validateFlipV"],
+    "name": ["validateName"],
+    "rotate": ["validateRotate"],
+    "scale": ["validateScale"]
+  }; }
+};
+PostIcon.style = postIconCss;
+
+exports.PostIcon = PostIcon;
+
+//# sourceMappingURL=post-icon-f418f76a.js.map

package/dist/cjs/post-icon-f418f76a.js.map

@@ -0,0 +1 @@
+{"file":"post-icon-f418f76a.js","mappings":"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","names":["checkEmptyOrOneOf","checkEmptyOrType","checkNonEmpty","checkType","h","Host","version"],"sources":["src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","src/components/post-icon/post-icon.tsx"],"sourcesContent":["@use 'sass:map';\n\n$post-icon-animations: (\n  'cylon': icon-animation-cylon 0.75s ease-in-out infinite alternate,\n  'cylon-vertical': icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate,\n  'spin': icon-animation-spin 2s linear infinite normal,\n  'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n  'fade': icon-animation-fade 0.75s ease-in-out infinite alternate,\n  'throb': icon-animation-throb 0.75s ease-in-out infinite alternate,\n);\n\n:host {\n  display: inline-block;\n  width: 1em;\n  vertical-align: -0.15em;\n}\n\nsvg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n  background-color: currentColor;\n  -webkit-mask-position: center center;\n  mask-position: center center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100%;\n  mask-size: 100%;\n}\n\n// flip\n\n:host([flip-h]:not([flip-h='false'])) {\n  scale: -1 1;\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n  scale: 1 -1;\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n  scale: -1;\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n  transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n  :host([animation='#{$key}']) {\n    animation: $value;\n  }\n}\n\n@keyframes icon-animation-cylon {\n  from {\n    transform: translateX(-25%);\n  }\n  to {\n    transform: translateX(25%);\n  }\n}\n\n@keyframes icon-animation-cylon-vertical {\n  from {\n    transform: translateY(25%);\n  }\n  to {\n    transform: translateY(-25%);\n  }\n}\n\n@keyframes icon-animation-fade {\n  from {\n    opacity: 0.1;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes icon-animation-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n\n@keyframes icon-animation-throb {\n  from {\n    opacity: 0.5;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n","import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\nimport { version } from '../../../package.json';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_NAMES = [\n  'cylon',\n  'cylon-vertical',\n  'spin',\n  'spin-reverse',\n  'fade',\n  'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n  tag: 'post-icon',\n  styleUrl: 'post-icon.scss',\n  shadow: true,\n})\nexport class PostIcon {\n  private path: string;\n\n  @Element() host: HTMLPostIconElement;\n\n  @State() svgStyles: string;\n  @State() svgOutput: string;\n\n  /**\n   * The name of the animation.\n   */\n  @Prop() readonly animation?: Animation | null = null;\n\n  @Watch('animation')\n  validateAnimation(newValue = this.animation) {\n    if (newValue !== undefined)\n      checkEmptyOrOneOf(\n        newValue,\n        ANIMATION_KEYS,\n        `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(\n          ', ',\n        )}.`,\n      );\n  }\n\n  /**\n   * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.\n   */\n  @Prop() readonly base?: string | null = null;\n\n  @Watch('base')\n  validateBase(newValue = this.base) {\n    checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped horizontally.\n   */\n  @Prop() readonly flipH?: boolean = false;\n\n  @Watch('flipH')\n  validateFlipH(newValue = this.flipH) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped vertically.\n   */\n  @Prop() readonly flipV?: boolean = false;\n\n  @Watch('flipV')\n  validateFlipV(newValue = this.flipV) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n  }\n\n  /**\n   * The name/id of the icon (e.g. 1000, 1001, ...).\n   */\n  @Prop() readonly name!: string;\n\n  @Watch('name')\n  validateName(newValue = this.name) {\n    checkNonEmpty(newValue, 'The post-icon \"name\" prop is required!.');\n    checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n  }\n\n  /**\n   * The number of degree for the css rotate transformation.\n   */\n  @Prop() readonly rotate?: number | null = null;\n\n  @Watch('rotate')\n  validateRotate(newValue = this.rotate) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n  }\n\n  /**\n   * The number for the css scale transformation.\n   */\n  @Prop() readonly scale?: number | null = null;\n\n  @Watch('scale')\n  validateScale(newValue = this.scale) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n  }\n\n  componentWillLoad() {\n    this.validateBase();\n    this.validateName();\n    this.validateFlipH();\n    this.validateFlipV();\n    this.validateScale();\n    this.validateRotate();\n    this.validateAnimation();\n  }\n\n  componentWillRender() {\n    this.setPath();\n  }\n\n  private setPath() {\n    // Construct icon path from different possible sources\n    const metaBase =\n      document.head\n        .querySelector('meta[name=\"design-system-settings\"][data-post-icon-base]')\n        ?.getAttribute('data-post-icon-base') ?? null;\n\n    const fileBase = `${this.base ?? metaBase ?? CDN_URL}/`.replace(/\\/\\/$/, '/');\n    const fileName = `${this.name}.svg#icon`;\n    const filePath = `${fileBase}${fileName}`;\n\n    this.path = new URL(filePath, window.location.origin).toString();\n  }\n\n  render() {\n    // create inline styles for some properties\n    const svgStyles = Object.entries({\n      '-webkit-mask-image': `url('${this.path}')`,\n      'mask-image': `url('${this.path}')`,\n      'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n      'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n    })\n      .filter(([_key, value]) => value !== null)\n      .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});\n\n    return (\n      <Host data-version={version}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style={svgStyles}>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/post-icon.cjs.entry.js

@@ -2,108 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-12cc37c9.js');
-const index$1 = require('./index-f8f6f146.js');
-const _package = require('./package-67091813.js');
-const checkNonEmpty = require('./check-non-empty-35b4d0b5.js');
-const checkType = require('./check-type-508a21a5.js');
-require('./check-one-of-4c2e8b2e.js');
+const postIcon = require('./post-icon-f418f76a.js');
+require('./index-b619e205.js');
+require('./index-b38a23e0.js');
+require('./constants-238701d3.js');
+require('./check-one-of-27ad3154.js');
+require('./package-7c4db872.js');
+require('./check-non-empty-ae713942.js');
 
-const postIconCss = ":host{display:inline-block;width:1em;vertical-align:-0.15em}svg{display:block;width:100%;height:100%;fill:currentColor;background-color:currentColor;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%}:host([flip-h]:not([flip-h=false])){scale:-1 1}:host([flip-v]:not([flip-v=false])){scale:1 -1}:host([flip-h][flip-v]:not([flip-h=false],[flip-v=false])){scale:-1}:host([animation]){transform-origin:center}:host([animation=cylon]){animation:icon-animation-cylon 0.75s ease-in-out infinite alternate}:host([animation=cylon-vertical]){animation:icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate}:host([animation=spin]){animation:icon-animation-spin 2s linear infinite normal}:host([animation=spin-reverse]){animation:icon-animation-spin 2s linear infinite reverse}:host([animation=fade]){animation:icon-animation-fade 0.75s ease-in-out infinite alternate}:host([animation=throb]){animation:icon-animation-throb 0.75s ease-in-out infinite alternate}@keyframes icon-animation-cylon{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@keyframes icon-animation-cylon-vertical{from{transform:translateY(25%)}to{transform:translateY(-25%)}}@keyframes icon-animation-fade{from{opacity:0.1}to{opacity:1}}@keyframes icon-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}@keyframes icon-animation-throb{from{opacity:0.5;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}";
 
-const CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';
-const ANIMATION_NAMES = [
-  'cylon',
-  'cylon-vertical',
-  'spin',
-  'spin-reverse',
-  'fade',
-  'throb',
-];
-const ANIMATION_KEYS = [...ANIMATION_NAMES];
-const PostIcon = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.svgStyles = undefined;
-    this.svgOutput = undefined;
-    this.animation = null;
-    this.base = null;
-    this.flipH = false;
-    this.flipV = false;
-    this.name = undefined;
-    this.rotate = null;
-    this.scale = null;
-  }
-  validateAnimation(newValue = this.animation) {
-    if (newValue !== undefined)
-      index$1.checkEmptyOrOneOf(newValue, ANIMATION_KEYS, `The post-icon "animation" prop requires one of the following values: ${ANIMATION_KEYS.join(', ')}.`);
-  }
-  validateBase(newValue = this.base) {
-    index$1.checkEmptyOrType(newValue, 'string', 'The post-icon "base" prop should be a string.');
-  }
-  validateFlipH(newValue = this.flipH) {
-    index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipH" prop should be a boolean.');
-  }
-  validateFlipV(newValue = this.flipV) {
-    index$1.checkEmptyOrType(newValue, 'boolean', 'The post-icon "flipV" prop should be a boolean.');
-  }
-  validateName(newValue = this.name) {
-    checkNonEmpty.checkNonEmpty(newValue, 'The post-icon "name" prop is required!.');
-    checkType.checkType(newValue, 'string', 'The post-icon "name" prop should be a string.');
-  }
-  validateRotate(newValue = this.rotate) {
-    index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "rotate" prop should be a number.');
-  }
-  validateScale(newValue = this.scale) {
-    index$1.checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
-  }
-  componentWillLoad() {
-    this.validateBase();
-    this.validateName();
-    this.validateFlipH();
-    this.validateFlipV();
-    this.validateScale();
-    this.validateRotate();
-    this.validateAnimation();
-  }
-  componentWillRender() {
-    this.setPath();
-  }
-  setPath() {
-    var _a, _b, _c, _d;
-    // Construct icon path from different possible sources
-    const metaBase = (_b = (_a = document.head
-      .querySelector('meta[name="design-system-settings"][data-post-icon-base]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-post-icon-base')) !== null && _b !== void 0 ? _b : null;
-    const fileBase = `${(_d = (_c = this.base) !== null && _c !== void 0 ? _c : metaBase) !== null && _d !== void 0 ? _d : CDN_URL}/`.replace(/\/\/$/, '/');
-    const fileName = `${this.name}.svg#icon`;
-    const filePath = `${fileBase}${fileName}`;
-    this.path = new URL(filePath, window.location.origin).toString();
-  }
-  render() {
-    // create inline styles for some properties
-    const svgStyles = Object.entries({
-      '-webkit-mask-image': `url('${this.path}')`,
-      'mask-image': `url('${this.path}')`,
-      'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,
-      'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,
-    })
-      .filter(([_key, value]) => value !== null)
-      .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
-    return (index.h(index.Host, { "data-version": _package.version }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", style: svgStyles })));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "animation": ["validateAnimation"],
-    "base": ["validateBase"],
-    "flipH": ["validateFlipH"],
-    "flipV": ["validateFlipV"],
-    "name": ["validateName"],
-    "rotate": ["validateRotate"],
-    "scale": ["validateScale"]
-  }; }
-};
-PostIcon.style = postIconCss;
 
-exports.post_icon = PostIcon;
+exports.post_icon = postIcon.PostIcon;
 
 //# sourceMappingURL=post-icon.cjs.entry.js.map

package/dist/cjs/post-icon.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"post-icon.entry.cjs.js","mappings":"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","names":["checkEmptyOrOneOf","checkEmptyOrType","checkNonEmpty","checkType","h","Host","version"],"sources":["./src/components/post-icon/post-icon.scss?tag=post-icon&encapsulation=shadow","./src/components/post-icon/post-icon.tsx"],"sourcesContent":["@use 'sass:map';\n\n$post-icon-animations: (\n  'cylon': icon-animation-cylon 0.75s ease-in-out infinite alternate,\n  'cylon-vertical': icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate,\n  'spin': icon-animation-spin 2s linear infinite normal,\n  'spin-reverse': icon-animation-spin 2s linear infinite reverse,\n  'fade': icon-animation-fade 0.75s ease-in-out infinite alternate,\n  'throb': icon-animation-throb 0.75s ease-in-out infinite alternate,\n);\n\n:host {\n  display: inline-block;\n  width: 1em;\n  vertical-align: -0.15em;\n}\n\nsvg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n  background-color: currentColor;\n  -webkit-mask-position: center center;\n  mask-position: center center;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100%;\n  mask-size: 100%;\n}\n\n// flip\n\n:host([flip-h]:not([flip-h='false'])) {\n  scale: -1 1;\n}\n\n:host([flip-v]:not([flip-v='false'])) {\n  scale: 1 -1;\n}\n\n:host([flip-h][flip-v]:not([flip-h='false'], [flip-v='false'])) {\n  scale: -1;\n}\n\n// scale\n// done with inline styling\n\n// rotate\n// done with inline styling\n\n// animation\n\n:host([animation]) {\n  transform-origin: center;\n}\n\n@each $key, $value in $post-icon-animations {\n  :host([animation='#{$key}']) {\n    animation: $value;\n  }\n}\n\n@keyframes icon-animation-cylon {\n  from {\n    transform: translateX(-25%);\n  }\n  to {\n    transform: translateX(25%);\n  }\n}\n\n@keyframes icon-animation-cylon-vertical {\n  from {\n    transform: translateY(25%);\n  }\n  to {\n    transform: translateY(-25%);\n  }\n}\n\n@keyframes icon-animation-fade {\n  from {\n    opacity: 0.1;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes icon-animation-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n\n@keyframes icon-animation-throb {\n  from {\n    opacity: 0.5;\n    transform: scale(0.5);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n","import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '../../utils';\nimport { version } from '../../../package.json';\n\nconst CDN_URL = 'https://unpkg.com/@swisspost/design-system-icons/public/post-icons';\nconst ANIMATION_NAMES = [\n  'cylon',\n  'cylon-vertical',\n  'spin',\n  'spin-reverse',\n  'fade',\n  'throb',\n] as const;\nconst ANIMATION_KEYS = [...ANIMATION_NAMES];\n\ntype Animation = (typeof ANIMATION_NAMES)[number];\n\n/**\n * @class PostIcon - representing a stencil component\n */\n@Component({\n  tag: 'post-icon',\n  styleUrl: 'post-icon.scss',\n  shadow: true,\n})\nexport class PostIcon {\n  private path: string;\n\n  @Element() host: HTMLPostIconElement;\n\n  @State() svgStyles: string;\n  @State() svgOutput: string;\n\n  /**\n   * The name of the animation.\n   */\n  @Prop() readonly animation?: Animation | null = null;\n\n  @Watch('animation')\n  validateAnimation(newValue = this.animation) {\n    if (newValue !== undefined)\n      checkEmptyOrOneOf(\n        newValue,\n        ANIMATION_KEYS,\n        `The post-icon \"animation\" prop requires one of the following values: ${ANIMATION_KEYS.join(\n          ', ',\n        )}.`,\n      );\n  }\n\n  /**\n   * The base path, where the icons are located (must be a public url).<br/>Leave this field empty to use the default cdn url.\n   */\n  @Prop() readonly base?: string | null = null;\n\n  @Watch('base')\n  validateBase(newValue = this.base) {\n    checkEmptyOrType(newValue, 'string', 'The post-icon \"base\" prop should be a string.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped horizontally.\n   */\n  @Prop() readonly flipH?: boolean = false;\n\n  @Watch('flipH')\n  validateFlipH(newValue = this.flipH) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipH\" prop should be a boolean.');\n  }\n\n  /**\n   * When set to `true`, the icon will be flipped vertically.\n   */\n  @Prop() readonly flipV?: boolean = false;\n\n  @Watch('flipV')\n  validateFlipV(newValue = this.flipV) {\n    checkEmptyOrType(newValue, 'boolean', 'The post-icon \"flipV\" prop should be a boolean.');\n  }\n\n  /**\n   * The name/id of the icon (e.g. 1000, 1001, ...).\n   */\n  @Prop() readonly name!: string;\n\n  @Watch('name')\n  validateName(newValue = this.name) {\n    checkNonEmpty(newValue, 'The post-icon \"name\" prop is required!.');\n    checkType(newValue, 'string', 'The post-icon \"name\" prop should be a string.');\n  }\n\n  /**\n   * The number of degree for the css rotate transformation.\n   */\n  @Prop() readonly rotate?: number | null = null;\n\n  @Watch('rotate')\n  validateRotate(newValue = this.rotate) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"rotate\" prop should be a number.');\n  }\n\n  /**\n   * The number for the css scale transformation.\n   */\n  @Prop() readonly scale?: number | null = null;\n\n  @Watch('scale')\n  validateScale(newValue = this.scale) {\n    checkEmptyOrType(newValue, 'number', 'The post-icon \"scale\" prop should be a number.');\n  }\n\n  componentWillLoad() {\n    this.validateBase();\n    this.validateName();\n    this.validateFlipH();\n    this.validateFlipV();\n    this.validateScale();\n    this.validateRotate();\n    this.validateAnimation();\n  }\n\n  componentWillRender() {\n    this.setPath();\n  }\n\n  private setPath() {\n    // Construct icon path from different possible sources\n    const metaBase =\n      document.head\n        .querySelector('meta[name=\"design-system-settings\"][data-post-icon-base]')\n        ?.getAttribute('data-post-icon-base') ?? null;\n\n    const fileBase = `${this.base ?? metaBase ?? CDN_URL}/`.replace(/\\/\\/$/, '/');\n    const fileName = `${this.name}.svg#icon`;\n    const filePath = `${fileBase}${fileName}`;\n\n    this.path = new URL(filePath, window.location.origin).toString();\n  }\n\n  render() {\n    // create inline styles for some properties\n    const svgStyles = Object.entries({\n      '-webkit-mask-image': `url('${this.path}')`,\n      'mask-image': `url('${this.path}')`,\n      'scale': this.scale && !isNaN(Number(this.scale)) ? `${this.scale}` : null,\n      'rotate': this.rotate && !isNaN(Number(this.rotate)) ? `${this.rotate}deg` : null,\n    })\n      .filter(([_key, value]) => value !== null)\n      .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});\n\n    return (\n      <Host data-version={version}>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" style={svgStyles}>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"post-icon.entry.cjs.js","mappings":";;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/cjs/post-tab-header-e08c2a42.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const index = require('./index-b619e205.js');
+const _package = require('./package-7c4db872.js');
+const checkNonEmpty = require('./check-non-empty-ae713942.js');
+
+const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:#fff;color:var(--post-contrast-color)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:#fff;color:var(--post-contrast-color);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button}";
+
+const PostTabHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tabId = undefined;
+    this.panel = undefined;
+  }
+  validateFor(newValue) {
+    checkNonEmpty.checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
+  }
+  componentWillLoad() {
+    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
+  }
+  render() {
+    return (index.h(index.Host, { "data-version": _package.version }, index.h("button", { "aria-selected": "false", class: "tab-title", id: this.tabId, role: "tab", tabindex: "-1", type: "button" }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "panel": ["validateFor"]
+  }; }
+};
+PostTabHeader.style = postTabHeaderCss;
+
+exports.PostTabHeader = PostTabHeader;
+
+//# sourceMappingURL=post-tab-header-e08c2a42.js.map

package/dist/cjs/post-tab-header-e08c2a42.js.map

@@ -0,0 +1 @@
+{"file":"post-tab-header-e08c2a42.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,k+LAAk+L;;MCS9+L,aAAa;;;;;;EAWxB,WAAW,CAAC,QAAyC;IACnDA,2BAAa,CAAC,QAAQ,EAAE,uDAAuD,CAAC,CAAC;GAClF;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;GAC3D;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,oBAAeC,gBAAO,IACzBF,qCAAsB,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,IACpGA,qBAAQ,CACD,CACJ,EACP;GACH;;;;;;;;;;","names":["checkNonEmpty","h","Host","version"],"sources":["src/components/post-tab-header/post-tab-header.scss?tag=post-tab-header&encapsulation=shadow","src/components/post-tab-header/post-tab-header.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/components/tabs/tab-title';\n@use '@swisspost/design-system-styles/core' as post;\n\n:host {\n  display: block;\n}\n\n.tab-title {\n  @include post.reset-button;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { checkNonEmpty } from '../../utils';\n\n@Component({\n  tag: 'post-tab-header',\n  styleUrl: 'post-tab-header.scss',\n  shadow: true,\n})\nexport class PostTabHeader {\n  @Element() host: HTMLPostTabHeaderElement;\n\n  @State() tabId: string;\n\n  /**\n   * The name of the panel controlled by the tab header.\n   */\n  @Prop() readonly panel: HTMLPostTabPanelElement['name'];\n\n  @Watch('panel')\n  validateFor(newValue: HTMLPostTabPanelElement['name']) {\n    checkNonEmpty(newValue, 'The \"panel\" prop is required for the post-tab-header.');\n  }\n\n  componentWillLoad() {\n    this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <button aria-selected=\"false\" class=\"tab-title\" id={this.tabId} role=\"tab\" tabindex=\"-1\" type=\"button\">\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}