@oiz/stzh-components 4.6.0-beta1 → 4.6.0-beta2

package/dist/components/{p-14716cc2.js.map → p-a02372f5.js.map}

@@ -1 +1 @@
-{"file":"p-14716cc2.js","mappings":"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","names":[],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(\n    --stzh-details-content-padding-top,\n    #{space(\"medium\")}\n  );\n  --content-padding-bottom: 0;\n\n  // @include mq($from: medium) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'medium')});\n  // }\n\n  // @include mq($from: large) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'large')});\n  // }\n\n  // &[no-padding-top]:not([no-padding-top=\"false\"]) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, 0px);\n  // }\n\n  // &[no-padding-bottom]:not([no-padding-bottom=\"false\"]) {\n  //   --content-padding-bottom: var(--stzh-details-content-padding-bottom, 0px);\n  // }\n}\n\n.stzh-details {\n  &,\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent,\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true,\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        newValue ? \"true\" : \"false\",\n      );\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-controls\" : \"aria-controls\",\n        `${this.detailsId}-content`,\n      );\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        this.open ? \"true\" : \"false\",\n      );\n    }\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(\n        child => !(child as HTMLElement).hasAttribute(\"slot\"),\n      ) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && this.triggerElement.firstElementChild) {\n      this.triggerElement.firstElementChild.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-details__trigger\">\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-a02372f5.js","mappings":"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","names":[],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(\n    --stzh-details-content-padding-top,\n    #{space(\"medium\")}\n  );\n  --content-padding-bottom: 0;\n\n  // @include mq($from: medium) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'medium')});\n  // }\n\n  // @include mq($from: large) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'large')});\n  // }\n\n  // &[no-padding-top]:not([no-padding-top=\"false\"]) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, 0px);\n  // }\n\n  // &[no-padding-bottom]:not([no-padding-bottom=\"false\"]) {\n  //   --content-padding-bottom: var(--stzh-details-content-padding-bottom, 0px);\n  // }\n}\n\n.stzh-details {\n  &,\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch, Event, EventEmitter } from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent,\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" },\n  ],\n  options: { duration: 300, easing: \"linear\" },\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true,\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        newValue ? \"true\" : \"false\",\n      );\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_SHOW.options,\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight,\n        }),\n        ANIMATION_HIDE.options,\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\",\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  };\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-controls\" : \"aria-controls\",\n        `${this.detailsId}-content`,\n      );\n      this.triggerElement.firstElementChild.setAttribute(\n        isStzh ? \"a11y-expanded\" : \"aria-expanded\",\n        this.open ? \"true\" : \"false\",\n      );\n    }\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children).find(\n        child => !(child as HTMLElement).hasAttribute(\"slot\"),\n      ) as HTMLElement;\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && this.triggerElement.firstElementChild) {\n      this.triggerElement.firstElementChild.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div ref={el => (this.triggerElement = el as HTMLDivElement)} class=\"stzh-details__trigger\">\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={el => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-7c4e756c.js → p-a2659715.js}

@@ -81,7 +81,7 @@ const StzhIcon = /*@__PURE__*/ proxyCustomElement(class StzhIcon extends H {
         }, 0);
     }
     render() {
-        return (h(Host, { key: 'bfdbbe588b9497dff0de28e61250a77a205c3f88' }, h("div", { key: 'cf90b6a37000f6c23dac9bbf93d21d5c2b3a1630', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
+        return (h(Host, { key: '3632f281961b04c9603091a7f9db711a6123793f' }, h("div", { key: '70ca189751061be8bdbaac7bbb1c04b13c2ca881', class: "stzh-icon", style: { display: this.iconDisplay }, innerHTML: this.svgHtml })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -114,4 +114,4 @@ function defineCustomElement() {
 
 export { StzhIcon as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-7c4e756c.js.map
+//# sourceMappingURL=p-a2659715.js.map

package/dist/components/{p-7c4e756c.js.map → p-a2659715.js.map}

@@ -1 +1 @@
-{"file":"p-7c4e756c.js","mappings":"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","names":[],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true,\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n   */\n  @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error(\"Failed to fetch icon\");\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add(\"stzh-icon__svg\");\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = \"\";\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector(\"title\");\n\n    if (!title) {\n      title = document.createElement(\"title\");\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\n    // for some obscure reason we need to delay showing the icon in safari,\n    // otherwise the icon doesn't show up randomly\n    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n    window.setTimeout(() => {\n      this.iconDisplay = \"contents\";\n    }, 0);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-a2659715.js","mappings":"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","names":[],"sources":["src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":["/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import { Component, Host, h, Prop, Watch, State, Element } from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true,\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n   */\n  @Prop({ attribute: \"a11y-title\" }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error(\"Failed to fetch icon\");\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, \"image/svg+xml\");\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add(\"stzh-icon__svg\");\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = \"\";\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector(\"title\");\n\n    if (!title) {\n      title = document.createElement(\"title\");\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\n    // for some obscure reason we need to delay showing the icon in safari,\n    // otherwise the icon doesn't show up randomly\n    // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n    window.setTimeout(() => {\n      this.iconDisplay = \"contents\";\n    }, 0);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-c5124a8b.js → p-a3c5c1b3.js}

@@ -103,7 +103,7 @@ const StzhButtongroup = /*@__PURE__*/ proxyCustomElement(class StzhButtongroup e
         const classes = {
             "stzh-buttongroup": true,
         };
-        return (h(Host, { key: '83723a5e9098e4bcdbc766a2e5107e2e56a0220f' }, h("div", { key: 'da13b86bf79d49b6a8631ab2774ea14f2b00f877', class: classes }, h("slot", { key: '13757ac234bf8e9c3ce589e88580054584ddf767', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '9501867b5b621c393a605e5b06dfb5cdcc1fe012' }, h("div", { key: '7243ae784e70f49f6441656f579e1ae583ca608f', class: classes }, h("slot", { key: 'd8853459525ba37f2792005f0e9f91acf8fde8e4', onSlotchange: this.onSlotChange }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -149,4 +149,4 @@ function defineCustomElement() {
 
 export { StzhButtongroup as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-c5124a8b.js.map
+//# sourceMappingURL=p-a3c5c1b3.js.map

package/dist/components/{p-c5124a8b.js.map → p-a3c5c1b3.js.map}

@@ -1 +1 @@
-{"file":"p-c5124a8b.js","mappings":"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","names":[],"sources":["src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  // ::slotted(stzh-button) {\n  //   z-index: 1;\n  //   margin-right: -1px;\n\n  //   &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n  //     z-index: 0;\n  //   }\n\n  //   &:first-child {\n  //     --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n  //     // --border-width: 1px 0px 1px 1px;\n  //   }\n\n  //   &:last-child {\n  //     --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n  //     // --border-width: 1px 1px 1px 0px;\n  //     margin-right: 0;\n  //   }\n\n  //   // only one button\n  //   &:first-child:last-child {\n  //     // --border-width: 1px;\n  //     --border-radius: #{$buttonBorderRadius};\n  //     margin: 0;\n  //   }\n\n  //   // when only two buttons\n  //   &:first-child + stzh-button:last-child {\n  //     // --border-width: 1px;\n  //   }\n\n  //   // buttons in the middle\n  //   &:not(:first-child):not(:last-child) {\n  //     --border-radius: 0px;\n  //   }\n  // }\n}\n\n:host([fullwidth]) .stzh-buttongroup {\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n  gap: space('xsmall');\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  Element\n} from \"@stencil/core\";\n\nimport { \n  StzhButtonSize \n} from '../../index';\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true,\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n  \n  /** Size variant (above all breakpoints) only valid for buttons without own size property */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n  @Prop({ reflect: true }) sizeSmall?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeMedium?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeLarge?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeUltra?: StzhButtonSize;\n\n  /** Whether buttongroup is full width */\n  @Prop({ reflect: true }) fullwidth?: boolean;\n\n  /** Whether buttongroup is rounded */  \n  @Prop({ reflect: true }) rounded?: boolean;\n\n // \"size-small\" -> \"sizeSmall\"\n  private toPropName(attrName: string): string {\n    return attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n  }\n\n  // If button has its own size property, do not override this property\n  private buttonHasOwnSize(btn: Element, attrName: string): boolean {\n    const attrVal = btn.getAttribute(attrName);\n    const propVal = (btn as any)[this.toPropName(attrName)] as StzhButtonSize | undefined;\n\n    const attrOwn = attrVal !== null && attrVal !== \"default\";\n    const propOwn = propVal !== undefined && propVal !== \"default\";\n    return attrOwn || propOwn;\n  }\n\n  private applyDefaultIfMissing(btn: Element, attrName: string, groupVal?: StzhButtonSize) {\n    if (groupVal === undefined) return;\n    // If button has own size property, do not override this property\n    if (this.buttonHasOwnSize(btn, attrName)) return;\n\n    // Otherwise set default size attribute (works directly, also before hydration)\n    if (btn.getAttribute(attrName) !== groupVal) {\n      btn.setAttribute(attrName, groupVal);\n    }\n  }\n\n  private applyFullwidthIfMissing(btn: Element, groupVal?: boolean) {\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute('fullwidth');            \n    const propVal = (btn as any).fullwidth as boolean | undefined;\n\n    // Exists property fullwidth buttons overrides buttongroup property fullwidth\n    // Property fullwidth === true (button has fullwidth)\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n    \n    // If button has own fullwidth property, do not override this property\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default fullwidth attribute\n    btn.setAttribute('fullwidth', '');\n  }\n\n  private applyRoundedIfMissing(btn: Element, groupVal?: boolean) {\n  // Rounded only true if group has rounded property true\n  if (groupVal !== true) return;\n\n  const hasAttr = btn.hasAttribute('rounded');\n  const propVal = (btn as any).rounded as boolean | undefined;\n\n  // Check if property rounded exists on button and if it is true or false\n  // If property is true button property rounded ovverided buttonsgroups property rounded\n  const attrOwn = hasAttr;\n  const propOwn = propVal === true;\n  \n  // Button > Buttongroup\n  if (attrOwn || propOwn) return;\n\n  // Otherwise set default rounded attribute\n  btn.setAttribute('rounded', '');\n}\n\n  async componentDidLoad() {\n    // Propagate, if button is defined\n    await customElements.whenDefined(\"stzh-button\");\n    this.propagateSizes();\n    requestAnimationFrame(() => this.propagateSizes());\n  }\n\n  @Watch('size')\n  @Watch('sizeSmall')\n  @Watch('sizeMedium')\n  @Watch('sizeLarge')\n  @Watch('sizeUltra')\n\n  onSizeChange() {\n    this.propagateSizes();\n  }\n\n  @Watch('fullwidth')\n    \n  onFullwidthChange() { \n    this.propagateSizes();\n  }\n\n  @Watch('rounded')\n\n  onRoundedChange() {\n    this.propagateSizes();\n  }\n\n  private propagateSizes() {\n    const buttons = this.element.querySelectorAll(\"stzh-button\");\n    buttons.forEach((btn) => {\n      this.applyDefaultIfMissing(btn, \"size\",        this.size);\n      this.applyDefaultIfMissing(btn, \"size-small\",  this.sizeSmall);\n      this.applyDefaultIfMissing(btn, \"size-medium\", this.sizeMedium);\n      this.applyDefaultIfMissing(btn, \"size-large\",  this.sizeLarge);\n      this.applyDefaultIfMissing(btn, \"size-ultra\",  this.sizeUltra);\n\n      this.applyRoundedIfMissing(btn, this.rounded);\n      this.applyFullwidthIfMissing(btn, this.fullwidth);\n    });\n  }\n\n  private onSlotChange = () => {\n    this.propagateSizes();\n  };\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.onSlotChange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-a3c5c1b3.js","mappings":"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","names":[],"sources":["src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  // ::slotted(stzh-button) {\n  //   z-index: 1;\n  //   margin-right: -1px;\n\n  //   &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n  //     z-index: 0;\n  //   }\n\n  //   &:first-child {\n  //     --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n  //     // --border-width: 1px 0px 1px 1px;\n  //   }\n\n  //   &:last-child {\n  //     --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n  //     // --border-width: 1px 1px 1px 0px;\n  //     margin-right: 0;\n  //   }\n\n  //   // only one button\n  //   &:first-child:last-child {\n  //     // --border-width: 1px;\n  //     --border-radius: #{$buttonBorderRadius};\n  //     margin: 0;\n  //   }\n\n  //   // when only two buttons\n  //   &:first-child + stzh-button:last-child {\n  //     // --border-width: 1px;\n  //   }\n\n  //   // buttons in the middle\n  //   &:not(:first-child):not(:last-child) {\n  //     --border-radius: 0px;\n  //   }\n  // }\n}\n\n:host([fullwidth]) .stzh-buttongroup {\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n  gap: space('xsmall');\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  Element\n} from \"@stencil/core\";\n\nimport { \n  StzhButtonSize \n} from '../../index';\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true,\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n  \n  /** Size variant (above all breakpoints) only valid for buttons without own size property */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n  @Prop({ reflect: true }) sizeSmall?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeMedium?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeLarge?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeUltra?: StzhButtonSize;\n\n  /** Whether buttongroup is full width */\n  @Prop({ reflect: true }) fullwidth?: boolean;\n\n  /** Whether buttongroup is rounded */  \n  @Prop({ reflect: true }) rounded?: boolean;\n\n // \"size-small\" -> \"sizeSmall\"\n  private toPropName(attrName: string): string {\n    return attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n  }\n\n  // If button has its own size property, do not override this property\n  private buttonHasOwnSize(btn: Element, attrName: string): boolean {\n    const attrVal = btn.getAttribute(attrName);\n    const propVal = (btn as any)[this.toPropName(attrName)] as StzhButtonSize | undefined;\n\n    const attrOwn = attrVal !== null && attrVal !== \"default\";\n    const propOwn = propVal !== undefined && propVal !== \"default\";\n    return attrOwn || propOwn;\n  }\n\n  private applyDefaultIfMissing(btn: Element, attrName: string, groupVal?: StzhButtonSize) {\n    if (groupVal === undefined) return;\n    // If button has own size property, do not override this property\n    if (this.buttonHasOwnSize(btn, attrName)) return;\n\n    // Otherwise set default size attribute (works directly, also before hydration)\n    if (btn.getAttribute(attrName) !== groupVal) {\n      btn.setAttribute(attrName, groupVal);\n    }\n  }\n\n  private applyFullwidthIfMissing(btn: Element, groupVal?: boolean) {\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute('fullwidth');            \n    const propVal = (btn as any).fullwidth as boolean | undefined;\n\n    // Exists property fullwidth buttons overrides buttongroup property fullwidth\n    // Property fullwidth === true (button has fullwidth)\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n    \n    // If button has own fullwidth property, do not override this property\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default fullwidth attribute\n    btn.setAttribute('fullwidth', '');\n  }\n\n  private applyRoundedIfMissing(btn: Element, groupVal?: boolean) {\n  // Rounded only true if group has rounded property true\n  if (groupVal !== true) return;\n\n  const hasAttr = btn.hasAttribute('rounded');\n  const propVal = (btn as any).rounded as boolean | undefined;\n\n  // Check if property rounded exists on button and if it is true or false\n  // If property is true button property rounded ovverided buttonsgroups property rounded\n  const attrOwn = hasAttr;\n  const propOwn = propVal === true;\n  \n  // Button > Buttongroup\n  if (attrOwn || propOwn) return;\n\n  // Otherwise set default rounded attribute\n  btn.setAttribute('rounded', '');\n}\n\n  async componentDidLoad() {\n    // Propagate, if button is defined\n    await customElements.whenDefined(\"stzh-button\");\n    this.propagateSizes();\n    requestAnimationFrame(() => this.propagateSizes());\n  }\n\n  @Watch('size')\n  @Watch('sizeSmall')\n  @Watch('sizeMedium')\n  @Watch('sizeLarge')\n  @Watch('sizeUltra')\n\n  onSizeChange() {\n    this.propagateSizes();\n  }\n\n  @Watch('fullwidth')\n    \n  onFullwidthChange() { \n    this.propagateSizes();\n  }\n\n  @Watch('rounded')\n\n  onRoundedChange() {\n    this.propagateSizes();\n  }\n\n  private propagateSizes() {\n    const buttons = this.element.querySelectorAll(\"stzh-button\");\n    buttons.forEach((btn) => {\n      this.applyDefaultIfMissing(btn, \"size\",        this.size);\n      this.applyDefaultIfMissing(btn, \"size-small\",  this.sizeSmall);\n      this.applyDefaultIfMissing(btn, \"size-medium\", this.sizeMedium);\n      this.applyDefaultIfMissing(btn, \"size-large\",  this.sizeLarge);\n      this.applyDefaultIfMissing(btn, \"size-ultra\",  this.sizeUltra);\n\n      this.applyRoundedIfMissing(btn, this.rounded);\n      this.applyFullwidthIfMissing(btn, this.fullwidth);\n    });\n  }\n\n  private onSlotChange = () => {\n    this.propagateSizes();\n  };\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.onSlotChange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-a0023430.js → p-a5acb217.js}

@@ -17,9 +17,9 @@ const StzhCell = /*@__PURE__*/ proxyCustomElement(class StzhCell extends H {
         this.alignSelf = "auto";
     }
     render() {
-        return (h(Host, { key: '36b1b52578f1376aaa2bb9ece69e9f6b9a6b3cc8' }, h("div", { key: '05ffd2740396f6d0f83edeb0a7a6bf74650021d5', class: {
+        return (h(Host, { key: '74305f85fac11be1d4099204b0bad158db539a72' }, h("div", { key: '826f6d0f8f2286b83aa05c3bb65b58ab410c5300', class: {
                 "stzh-cell": true,
-            } }, h("slot", { key: '234b9e17c0a533f5866f9989a7a12fe8f109b95d' }))));
+            } }, h("slot", { key: 'e11439082fa2ba4e3c7de5df868a39d710ec6dce' }))));
     }
     static get style() { return StzhCellStyle0; }
 }, [1, "stzh-cell", {
@@ -47,4 +47,4 @@ function defineCustomElement() {
 
 export { StzhCell as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-a0023430.js.map
+//# sourceMappingURL=p-a5acb217.js.map

package/dist/components/{p-a0023430.js.map → p-a5acb217.js.map}

@@ -1 +1 @@
-{"file":"p-a0023430.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0yNAA0yN,CAAC;AAC/zN,uBAAe,WAAW;;MCWb,QAAQ;;;;;;;;;;qBAaoD,MAAM;yBAGtB,MAAM;;IAE7D,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-a5acb217.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0yNAA0yN,CAAC;AAC/zN,uBAAe,WAAW;;MCWb,QAAQ;;;;;;;;;;qBAaoD,MAAM;yBAGtB,MAAM;;IAE7D,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,IAED,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells / $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{calc(100% / ($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n\n  @include mq($from: large) {\n    padding-left: calc(#{$gridGutterLarge} / 2);\n    padding-right: calc(#{$gridGutterLarge} / 2);\n  }\n\n  @include mq($from: ultra) {\n    padding-left: calc(#{$gridGutterUltra} / 2);\n    padding-right: calc(#{$gridGutterUltra} / 2);\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true,\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-12c94697.js → p-a7393afc.js}

@@ -1,14 +1,14 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { s as setPropsIfNull, h as hasSlot } from './p-289f5de2.js';
-import { d as defineCustomElement$9 } from './p-486bf53e.js';
-import { d as defineCustomElement$8 } from './p-dd1c0c0c.js';
-import { d as defineCustomElement$7 } from './p-4a78990f.js';
-import { d as defineCustomElement$6 } from './p-7c4e756c.js';
-import { d as defineCustomElement$5 } from './p-e5cf7853.js';
-import { d as defineCustomElement$4 } from './p-26edabbb.js';
-import { d as defineCustomElement$3 } from './p-963d59bf.js';
-import { d as defineCustomElement$2 } from './p-63c4d8c4.js';
-import { d as defineCustomElement$1 } from './p-613937f1.js';
+import { d as defineCustomElement$9 } from './p-95d2855a.js';
+import { d as defineCustomElement$8 } from './p-42e86bbd.js';
+import { d as defineCustomElement$7 } from './p-b84d0233.js';
+import { d as defineCustomElement$6 } from './p-a2659715.js';
+import { d as defineCustomElement$5 } from './p-4c4a22d3.js';
+import { d as defineCustomElement$4 } from './p-b35195c8.js';
+import { d as defineCustomElement$3 } from './p-7121e1bf.js';
+import { d as defineCustomElement$2 } from './p-ace11500.js';
+import { d as defineCustomElement$1 } from './p-95b36277.js';
 
 const stzhCardCss = ".sc-stzh-card-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-h,[stzh-hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-h .has-focus.sc-stzh-card{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card{outline-style:none !important}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card::-moz-focus-inner{border:0 !important}.sc-stzh-card-h{--border-radius:0px;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:flex;flex-direction:column;position:relative;border-radius:var(--border-radius)}@media print{.sc-stzh-card-h{page-break-inside:avoid;break-inside:avoid}}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h.sc-stzh-card-s>[slot=image],.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h.sc-stzh-card-s>img[slot=image],.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.stzh-card.sc-stzh-card{flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-grey10);border-radius:var(--border-radius)}.stzh-card--background-grey.sc-stzh-card{background-color:var(--stzh-color-grey10)}.stzh-card--background-white.sc-stzh-card{background-color:var(--stzh-color-white)}.stzh-card--background-grey.sc-stzh-card .stzh-card__card-action-popover.sc-stzh-card{--stzh-popover-background:var(--stzh-color-grey20);--stzh-popover-item-hover-bg:var(--stzh-color-grey30)}.stzh-card__content-wrapper.sc-stzh-card{position:relative;flex-grow:1;display:flex;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 900px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header-top.sc-stzh-card{display:flex;justify-content:space-between;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:inline-flex;margin-top:var(--stzh-space-xsmall);gap:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}.stzh-card__left.sc-stzh-card{align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);display:flex;align-items:center;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}.stzh-card__subtitle-text.sc-stzh-card{position:relative;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:\",\";position:absolute;left:0}.stzh-card__content.sc-stzh-card{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);flex-grow:1}.stzh-card__card-actions.sc-stzh-card{display:inline-flex;white-space:nowrap}@media screen and (max-width: 899px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-base-color)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge);padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xxlarge)}}.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}.stzh-card--has-header.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xsmall)}.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-footer.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--has-tag.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxxlarge)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__content.sc-stzh-card{transition:color var(--stzh-base-transition-animation-speed)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary);-webkit-text-decoration-line:none;text-decoration-line:none;border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::before,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card--has-link.sc-stzh-card .stzh-card__header-meta.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-actionset.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-select-button.sc-stzh-card{position:relative;z-index:2}.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__content.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__content.sc-stzh-card{color:var(--stzh-color-secondary60)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;appearance:none;background:none;border:none;transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary)}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--hyphens.sc-stzh-card .stzh-card__heading.sc-stzh-card,.stzh-card--hyphens.sc-stzh-card .stzh-card__title.sc-stzh-card{hyphens:auto}.stzh-card__header.sc-stzh-card{position:relative}.stzh-card__badge.sc-stzh-card{position:absolute;left:-0.3125rem;top:-0.3125rem;z-index:1}";
 const StzhCardStyle0 = stzhCardCss;
@@ -301,14 +301,14 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
             [`stzh-card--${this.variant}`]: !!this.variant,
             "stzh-card--hyphens": this.hyphensEnabled,
         };
-        return (h(Host, { key: 'a1927ae6d62f21414304d6462b9d041988b3c59b', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: '1c972d5a6f15a4a0b335b35e0630a4a374975ae3',
+        return (h(Host, { key: '1572888deff0cdc23ed21421458869592e83b242', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: '41d64741a737f6440ef4f14ba1563458c64a9f89',
             // ref={(el) => (this.mainElement = el as HTMLElement)}
-            class: classes, onClick: !this.href ? this.handleCardClick : null }, h("a", { key: '5cf04a76fad58fca6b0966e5425e91ae85c71d5f', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: (_d = this.href) !== null && _d !== void 0 ? _d : null, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: 'f7341e9d893bef8c126c57bdc9658ac5d7322b53', name: "image" })), h("div", { key: 'b2e1162fcd1f69b8b2fbead1bd1c69d3730adc96', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: 'dcfabe4d87f43b0fd7c81d661b1f0b1a5a864d0a', class: "stzh-card__dnd", name: "drag" }), h("header", { key: '5dc111120bcb74bbf7154a35b834a56a952da91b', class: "stzh-card__header", onClick: this.headerClick }, (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '41038648295d4bfaab4843e89b5d98fb05b16158', class: "stzh-card__badge", label: this.badge, type: this.badgeType })), h("div", { key: 'f610a679f5d4a221f853732b8c4c5d1127c7bc0b', class: "stzh-card__header-top" }, h("div", { key: 'a01863d74297dac0932eb9091d5fea06cd3b0c0e', class: "stzh-card__header-left" }, h("div", { key: '2f4d07b00d3ac7afa2f483405d6f536750983035', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: '20e27a11ac1906a5190379db019de6a392d2f5e4', class: "stzh-card__title" }, h("a", { key: '86d67ffb4ebc77fb3f048c730f7984ad08318ad4', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: (_e = this.href) !== null && _e !== void 0 ? _e : null, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: '62bf9c28ef2841c7c5f76815789e94f21493d7f9', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: 'f9dd86d7d74b9421ac23556e5695de064a1be16b', id: descriptionId, hidden: true }, (_f = this.localization) === null || _f === void 0 ? void 0 : _f.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: 'c5fb4c5b7ad3d3343ed78fe24793c0414d33ffb7', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: '58834cd8fd62c79669bdffc0e86c100e014675e3', class: "stzh-card__header-right" }, h("div", { key: '312f0a4839d113921cfe19980247107d16a6f389', class: "stzh-card__card-actions", onClick: e => e.stopPropagation() }, this.starrable && (h("stzh-tooltip", { key: 'dc88f8d9c9b27ef01c7fc046016f479b4c9b957a' }, h("stzh-button", { key: 'b82b568f13a9cdabcdd54503c07bbf5524071919', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '24936f59baa0b0e18aafc05eb2cd3553aa7c7551', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: 'e74953b1570e871de39895ff1a110125565a42ad', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
+            class: classes, onClick: !this.href ? this.handleCardClick : null }, h("a", { key: '58227bb0b3bb1ccc1e62d69693ee5181ee7e4710', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: (_d = this.href) !== null && _d !== void 0 ? _d : null, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: 'fb029dd333198d02a7912c00cbeb541697894f45', name: "image" })), h("div", { key: '0bf91b735f3300eab9d93ae8708ca4ba570b67ef', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: '4631088bf33ddcbd2916de4e96b91804c23e366c', class: "stzh-card__dnd", name: "drag" }), h("header", { key: '21cb5bcd361e9a23507ebf5fd1629449537b520d', class: "stzh-card__header", onClick: this.headerClick }, (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '0bf345168d1dae51b8926fc4ae48cfd3567f0e57', class: "stzh-card__badge", label: this.badge, type: this.badgeType })), h("div", { key: '515e44f8f74694951012d1e588ed52c7d608e66a', class: "stzh-card__header-top" }, h("div", { key: '09639aea50aed0d878e6797831170ef4c274a5b2', class: "stzh-card__header-left" }, h("div", { key: 'efecb89c56301b80e4d02acda3ce66ad06f52d10', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: 'e069ccc41979c531c88ed20cab9a298878cc179c', class: "stzh-card__title" }, h("a", { key: '686849f9bb3dc2ea6a276cc3bdbbf2c54366b4b7', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: (_e = this.href) !== null && _e !== void 0 ? _e : null, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: '42791028e739b4b8b7004433ab242fc246dae8f3', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: 'b120533300ed723ec033dda8cca857ef3c4d7882', id: descriptionId, hidden: true }, (_f = this.localization) === null || _f === void 0 ? void 0 : _f.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: 'd4bee0ad4238b833511a65f00a1f0439acfd7425', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: '7d8ebcdb9ee82bbe33dbd65d69f090a01cf5c74c', class: "stzh-card__header-right" }, h("div", { key: '40e77cd5a4aa99875c313fa787e3a637582f31bb', class: "stzh-card__card-actions", onClick: e => e.stopPropagation() }, this.starrable && (h("stzh-tooltip", { key: '892240acd426e95dfd674b9a67367b05a0c6ef07' }, h("stzh-button", { key: '8efe0701f02ad6474b5e26ef6ba44ee2c9ae5aa7', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '61fdbc6110ddad0931e35a10ca79b373284bd1af', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '5a76648a820109e067cdad0ed9a0b197762a9b63', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
                 "stzh-card__card-action-popover": true,
                 // "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
-            } }, h("stzh-button", { key: 'e3e5761b4469c00df3597954fe35dd0a78eeedb7', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_g = headerActionsWithBadge[0]) === null || _g === void 0 ? void 0 : _g.badgeType) || "default" }), h("stzh-menu", { key: '7a2d55ed89b15122f7dff103e90b5ee96a9953a1', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", { icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => {
+            } }, h("stzh-button", { key: '79a6cf054d07ab7ed8b152da7e30e560fd0dee66', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_g = headerActionsWithBadge[0]) === null || _g === void 0 ? void 0 : _g.badgeType) || "default" }), h("stzh-menu", { key: '502b61374688bc119032a8790ef0cd7cb8c12e57', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", { icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => {
                 this.actionClick(e, action);
-            } }, action.label))), sortableActionsEnabled && (h(Fragment, { key: 'a64c018b74ed9ad7252f971b79ed82e45632c5ff' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: '03c36ab54ddd81286ce203bd319ec1b825a03475', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: '51feaeba837cb5000662abcff76608a55209d9f7', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: '9edb6e478a90c38e1792d42b8c9ad75d3682ed15', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: 'aaf4a1c9280fe8aab924fb6d65def99f06916aa0', class: "stzh-card__header-meta" }, h("slot", { key: '5b2e0e6c14626f74a9ea6452da4a2ad076152abf', name: "meta" }))), h("div", { key: '97f9726fdcabda0fed04fef2a0ab47a467a148a3', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '8cc5f12a74585dbdd92e2596fb7263b30dc26c6a', name: "content" })), h("div", { key: '5c6c406551d34e0d59d85daa5d1fd4e162fb177a', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: '21ab202353ae5c00e0ac7429f3cea8eb78e13169', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: 'e2911f2b831e2bd1c169b04f565bcf412c1d844e', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: '0c7c3aa76b9cd08bc3092963c1398d0aa59d9d0c', class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))))));
+            } }, action.label))), sortableActionsEnabled && (h(Fragment, { key: '74dad17d1443dbb00ed137da9b7fe71a18b500fa' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: '0f300c16fa1701b8ec74de55d9640c236e0514ed', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: '1a3c869b187e2f984ebc17cd82ad1efd55841c12', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: 'cdbb0c9dde1eac63703a12c3a462a4a02f4a93cc', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: 'cba6a93e0d933efd81f73071fa884643c4322c67', class: "stzh-card__header-meta" }, h("slot", { key: 'd14fd3456d04e0db8353a87388c0d7a052dc0cc8', name: "meta" }))), h("div", { key: '099c16541db316ab56e01e4f12b2000499836272', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '49e90957a96df696cc900f70a7047431bac9e3b5', name: "content" })), h("div", { key: '735acedd93518779ec5072d9c742d7797086ce90', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: 'bcf888acf08e0aac57d574f0615ad5b00212558b', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: 'e2b1371966f3bed178ae947dd535347a107b1ed1', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: '07c75ae6ea0f21c5e6982e1c099c86101ecf5276', class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -413,4 +413,4 @@ function defineCustomElement() {
 
 export { StzhCard as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-12c94697.js.map
+//# sourceMappingURL=p-a7393afc.js.map