@ukic/web-components 3.25.0 → 3.27.0

package/components/ic-button2.js.map

@@ -0,0 +1 @@
+{"file":"ic-button2.js","mappings":"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","names":[],"sources":["src/components/ic-button/ic-button.css?tag=ic-button&encapsulation=shadow","src/components/ic-button/ic-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n* @prop --min-width: Minimum width of the button.\n* @prop --height: The height of the button.\n*/\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  --icon-width: 100%;\n  --icon-height: 100%;\n}\n\n.button,\n::slotted(a) {\n  font-family: var(--ic-font-body-family);\n  text-decoration: none;\n  font-weight: 600;\n  font-size: 0.875rem;\n  transition: var(--ic-easing-transition-fast);\n  border-radius: var(--ic-border-radius);\n  min-width: var(--min-width, 6.25rem);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n:host(.with-badge) .button {\n  border-radius: 0.2188rem;\n}\n\n.button:hover,\n::slotted(a:hover) {\n  cursor: pointer;\n}\n\n.button:focus,\n::slotted(a:focus) {\n  box-shadow: var(--ic-border-focus);\n}\n\n.button:focus-visible,\n::slotted(a:focus-visible) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.ic-button-disabled),\n:host(.ic-button-disabled) .button,\n:host(.ic-button-disabled) ::slotted(a),\n:host(.ic-button-loading),\n:host(.ic-button-loading) .button {\n  pointer-events: none;\n}\n\n:host(.top-icon) .button {\n  flex-direction: column;\n\n  --height: fit-content;\n}\n\n:host(.top-icon) .button .icon-container {\n  margin-right: 0;\n}\n\n/* Variants */\n\n/* Primary */\n\n:host(.ic-button-variant-primary) .button,\n:host(.ic-button-variant-icon-primary) .button {\n  color: var(--ic-button-primary-text);\n  background-color: var(--ic-button-primary-background);\n}\n\n:host(.ic-button-variant-primary:not(.ic-button-disabled)) ::slotted(svg) {\n  color: var(--ic-button-primary-icon);\n}\n\n:host(.ic-button-variant-primary) ::slotted(a),\n:host(.ic-button-variant-icon-primary) ::slotted(a) {\n  --ic-typography-color: var(--ic-button-primary-text);\n\n  color: var(--ic-button-primary-text);\n  background-color: var(--ic-button-primary-background) !important;\n}\n\n:host(.ic-button-variant-primary) .button:hover,\n:host(.ic-button-variant-icon-primary) .button:hover {\n  background-color: var(--ic-button-primary-background-hover);\n}\n\n:host(.ic-button-variant-primary) ::slotted(a:hover),\n:host(.ic-button-variant-icon-primary) ::slotted(a:hover) {\n  background-color: var(--ic-button-primary-background-hover) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-loading) .button,\n:host(.ic-button-variant-primary) .button:active,\n:host(.ic-button-variant-icon-primary.ic-button-loading) .button,\n:host(.ic-button-variant-icon-primary) .button:active {\n  background-color: var(--ic-button-primary-background-pressed);\n\n  --button-loading-inner-color: var(--ic-button-primary-text);\n  --button-loading-outer-color: var(--ic-button-primary-background-pressed);\n}\n\n:host(.ic-button-variant-primary) ::slotted(a:active),\n:host(.ic-button-variant-icon-primary) ::slotted(a:active) {\n  background-color: var(--ic-button-primary-background-pressed) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-primary.ic-button-disabled) .button {\n  background: var(--ic-button-primary-background-disabled);\n  color: var(--ic-button-primary-text-disabled);\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a) {\n  background: var(--ic-button-primary-background-disabled) !important;\n\n  --ic-typography-color: var(--ic-button-primary-text-disabled) !important;\n\n  color: var(--ic-button-primary-text-disabled) !important;\n}\n\n/* Primary - monochrome */\n\n:host(.ic-button-variant-primary.monochrome) .button,\n:host(.ic-button-variant-icon-primary.monochrome) .button {\n  color: var(--ic-button-primary-text-monochrome);\n  background-color: var(--ic-button-primary-background-monochrome);\n}\n\n:host(.ic-button-variant-primary.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a) {\n  background-color: var(--ic-button-primary-background-monochrome) !important;\n}\n\n:host(.ic-button-variant-primary.monochrome) .button:hover,\n:host(.ic-button-variant-icon-primary.monochrome) .button:hover {\n  background-color: var(--ic-button-primary-background-hover-monochrome);\n}\n\n:host(.ic-button-variant-primary.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:hover) {\n  background-color: var(\n    --ic-button-primary-background-hover-monochrome\n  ) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-primary.monochrome) .button:active,\n:host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-icon-primary.monochrome) .button:active {\n  background-color: var(--ic-button-primary-background-pressed-monochrome);\n\n  --button-loading-inner-color: var(--ic-button-primary-text-monochrome);\n  --button-loading-outer-color: var(--ic-button-primary-background-monochrome);\n}\n\n:host(.ic-button-variant-primary.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:active) {\n  background-color: var(\n    --ic-button-primary-background-pressed-monochrome\n  ) !important;\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled.monochrome) .button,\n:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) .button {\n  background-color: var(--ic-button-primary-background-disabled-monochrome);\n  color: var(--ic-button-primary-text-disabled-monochrome);\n}\n\n:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome)\n  ::slotted(a) {\n  background-color: var(\n    --ic-button-primary-background-disabled-monochrome\n  ) !important;\n}\n\n/* Secondary  */\n\n:host(.ic-button-variant-secondary) .button,\n:host(.ic-button-variant-icon-secondary) .button {\n  border: var(--ic-border-width) solid var(--ic-button-secondary-border);\n  color: var(--ic-button-secondary-text);\n}\n\n:host(.ic-button-variant-secondary) ::slotted(a),\n:host(.ic-button-variant-icon-secondary) ::slotted(a) {\n  border: var(--ic-border-width) solid var(--ic-button-secondary-border) !important;\n  color: var(--ic-button-secondary-text) !important;\n\n  --ic-typography-color: var(--ic-button-secondary-text) !important;\n}\n\n:host(.ic-button-variant-secondary) .button:hover,\n:host(.ic-button-variant-icon-secondary) .button:hover {\n  background-color: var(--ic-button-secondary-background-hover-active);\n  border-color: var(--ic-button-secondary-border-hover);\n  color: var(--ic-button-secondary-text-hover-active);\n}\n\n:host(.ic-button-variant-secondary) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary) ::slotted(a:hover) {\n  background-color: var(\n    --ic-button-secondary-background-hover-active\n  ) !important;\n}\n\n:host(.ic-button-variant-secondary) .button:active,\n:host(.ic-button-variant-icon-secondary) .button:active {\n  border-color: var(--ic-button-secondary-border-pressed);\n  background-color: var(--ic-button-secondary-background-pressed-active);\n  color: var(--ic-button-secondary-text-pressed-active);\n}\n\n:host(.ic-button-variant-secondary) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary) ::slotted(a:active) {\n  background-color: var(\n    --ic-button-secondary-background-pressed-active\n  ) !important;\n}\n\n:host(.ic-button-variant-secondary.ic-button-loading) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-loading) .button {\n  border-color: var(--ic-button-secondary-border-pressed);\n  background-color: var(\n    --loading-button-background,\n    var(--ic-button-secondary-background-pressed-active)\n  ) !important;\n  color: var(--ic-button-secondary-text-pressed-active);\n\n  --button-loading-inner-color: var(--ic-button-secondary-border-pressed);\n  --button-loading-outer-color: var(\n    --ic-button-secondary-background-pressed-active\n  );\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button {\n  border-color: var(--ic-button-secondary-border-disabled);\n  color: var(--ic-button-secondary-text-disabled);\n  background: none;\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a) {\n  background: none !important;\n}\n\n/* Secondary - non-transparent background */\n\n:host(.ic-button-variant-secondary.background) .button,\n:host(.ic-button-variant-icon-secondary.background) .button {\n  background-color: var(--ic-button-secondary-background);\n}\n\n:host(.ic-button-variant-secondary.background) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.background) ::slotted(a) {\n  background-color: var(--ic-button-secondary-background) !important;\n}\n\n:host(.ic-button-variant-secondary.background) .button:hover,\n:host(.ic-button-variant-icon-secondary.background) .button:hover {\n  background-image: var(--ic-button-secondary-background-non-transparent-hover);\n}\n\n:host(.ic-button-variant-secondary.background) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover) {\n  background-image: var(\n    --ic-button-secondary-background-non-transparent-hover\n  ) !important;\n}\n\n:host(.ic-button-variant-secondary.background) .button:active,\n:host(.ic-button-variant-icon-secondary.background) .button:active {\n  background-image: var(\n    --ic-button-secondary-background-non-transparent-active\n  );\n}\n\n:host(.ic-button-variant-secondary.background) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary.background) ::slotted(a:active) {\n  background-image: var(\n    --ic-button-secondary-background-non-transparent-active\n  ) !important;\n}\n\n/* Secondary - monochrome */\n\n:host(.ic-button-variant-secondary.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.monochrome) .button {\n  background-color: none;\n  border: var(--ic-border-width) solid\n    var(--ic-button-secondary-border-monochrome);\n  color: var(--ic-button-secondary-text-monochrome);\n}\n\n:host(.ic-button-variant-secondary.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a) {\n  background-color: none !important;\n}\n\n:host(.ic-button-variant-secondary.monochrome) .button:hover,\n:host(.ic-button-variant-icon-secondary.monochrome) .button:hover {\n  background-color: var(--ic-button-secondary-background-hover-monochrome);\n  border-color: var(--ic-button-secondary-border-hover-monochrome);\n  color: var(--ic-button-secondary-text-hover-monochrome);\n}\n\n:host(.ic-button-variant-secondary.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:hover) {\n  background-color: var(\n    --ic-button-secondary-background-hover-monochrome\n  ) !important;\n}\n\n:host(.ic-button-variant-secondary.monochrome) .button:active,\n:host(.ic-button-variant-icon-secondary.monochrome) .button:active {\n  background-color: var(--ic-button-secondary-background-pressed-monochrome);\n  border-color: var(--ic-button-secondary-border-pressed-monochrome);\n  color: var(--ic-button-secondary-text-pressed-monochrome);\n}\n\n:host(.ic-button-variant-secondary.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:active) {\n  background-color: var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important;\n}\n\n:host(.ic-button-variant-secondary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-loading.monochrome) .button {\n  background-color: var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important;\n  border-color: var(--ic-button-secondary-border-pressed-monochrome);\n  color: var(--ic-button-secondary-text-pressed-monochrome);\n\n  --button-loading-inner-color: var(\n    --ic-button-secondary-text-pressed-monochrome\n  );\n  --button-loading-outer-color: var(\n    --ic-button-secondary-background-pressed-monochrome\n  );\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) .button {\n  background: none;\n  border-color: var(--ic-button-secondary-border-disabled-monochrome);\n  color: var(--ic-button-secondary-text-disabled-monochrome);\n}\n\n:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome)\n  ::slotted(a) {\n  background: none !important;\n}\n\n/* Secondary - non-transparent background - monochrome */\n\n:host(.ic-button-variant-secondary.background.monochrome) .button,\n:host(.ic-button-variant-icon-secondary.background.monochrome) .button {\n  background-color: var(--ic-button-secondary-background-monochrome);\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a) {\n  background-color: var(--ic-button-secondary-background-monochrome) !important;\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) .button:hover,\n:host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover {\n  background-image: var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  );\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-secondary.background.monochrome)\n  ::slotted(a:hover) {\n  background-image: var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  ) !important;\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) .button:active,\n:host(.ic-button-variant-icon-secondary.background.monochrome) .button:active {\n  background-image: var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  );\n}\n\n:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-secondary.background.monochrome)\n  ::slotted(a:active) {\n  background-image: var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  ) !important;\n}\n\n/* Tertiary */\n\n:host(.ic-button-variant-tertiary) .button,\n:host(.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-variant-tertiary) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary) ::slotted(a) {\n  color: var(--ic-button-tertiary-text-active);\n\n  --ic-typography-color: var(--ic-button-tertiary-text-active);\n}\n\n:host(.ic-button-variant-tertiary) .button:hover,\n:host(.ic-button-variant-icon-tertiary) .button:hover {\n  background-color: var(--ic-button-tertiary-background-hover-active);\n  color: var(--ic-button-tertiary-text-hover-active);\n}\n\n:host(.ic-button-variant-tertiary) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover) {\n  background-color: var(\n    --ic-button-tertiary-background-hover-active\n  ) !important;\n}\n\n:host(.ic-button-variant-tertiary) .button:active,\n:host(.ic-button-variant-tertiary.ic-button-loading) .button,\n:host(.ic-button-variant-icon-tertiary) .button:active,\n:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button {\n  background-color: var(--ic-button-tertiary-background-pressed-active);\n  color: var(--ic-button-tertiary-text-pressed-active);\n\n  --button-loading-inner-color: var(--ic-button-tertiary-text-pressed-active);\n  --button-loading-outer-color: var(--ic-button-tertiary-background-pressed);\n}\n\n:host(.ic-button-variant-tertiary) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary) ::slotted(a:active) {\n  background-color: var(\n    --ic-button-tertiary-background-pressed-active\n  ) !important;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button {\n  color: var(--ic-button-tertiary-text-disabled);\n  background: none;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a) {\n  background: none !important;\n}\n\n/* Tertiary - non-transparent background */\n\n:host(.ic-button-variant-tertiary.background) .button,\n:host(.ic-button-variant-icon-tertiary.background) .button {\n  background-color: var(--ic-button-tertiary-background);\n}\n\n:host(.ic-button-variant-tertiary.background) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.background) ::slotted(a) {\n  background-color: var(--ic-button-tertiary-background) !important;\n}\n\n:host(.ic-button-variant-tertiary.background) .button:hover,\n:host(.ic-button-variant-icon-tertiary.background) .button:hover {\n  background-image: var(--ic-button-tertiary-background-non-transparent-hover);\n}\n\n:host(.ic-button-variant-tertiary.background) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary.background) ::slotted(a:hover) {\n  background-image: var(\n    --ic-button-tertiary-background-non-transparent-hover\n  ) !important;\n}\n\n:host(.ic-button-variant-tertiary.background) .button:active,\n:host(.ic-button-variant-icon-tertiary.background) .button:active {\n  background-image: var(--ic-button-tertiary-background-non-transparent-active);\n}\n\n:host(.ic-button-variant-tertiary.background) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary.background) ::slotted(a:active) {\n  background-image: var(\n    --ic-button-tertiary-background-non-transparent-active\n  ) !important;\n}\n\n/* Tertiary - monochrome */\n\n:host(.ic-button-variant-tertiary.monochrome) .button,\n:host(.ic-button-variant-tertiary.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a) {\n  color: var(--ic-button-tertiary-text-monochrome);\n\n  --ic-typography-color: var(--ic-button-tertiary-text-monochrome);\n}\n\n:host(.ic-button-variant-tertiary.monochrome) .button:hover,\n:host(.ic-button-variant-icon-tertiary.monochrome) .button:hover {\n  background-color: var(--ic-button-tertiary-background-hover-monochrome);\n  color: var(--ic-button-tertiary-text-hover-monochrome);\n}\n\n:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:hover) {\n  background-color: var(\n    --ic-button-tertiary-background-hover-monochrome\n  ) !important;\n}\n\n:host(.ic-button-variant-tertiary.monochrome) .button:active,\n:host(.ic-button-variant-tertiary.ic-button-loading.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.monochrome) .button:active,\n:host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button {\n  background-color: var(--ic-button-tertiary-background-pressed-monochrome);\n  color: var(--ic-button-tertiary-text-pressed-monochrome);\n\n  --button-loading-inner-color: var(\n    --ic-button-tertiary-text-pressed-monochrome\n  );\n  --button-loading-outer-color: var(\n    --ic-button-tertiary-background-pressed-monochrome\n  );\n}\n\n:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:active) {\n  background-color: var(\n    --ic-button-tertiary-background-pressed-monochrome\n  ) !important;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) .button {\n  color: var(--ic-button-tertiary-text-disabled-monochrome);\n  background: none;\n}\n\n:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome)\n  ::slotted(a) {\n  background: none !important;\n}\n\n/* Tertiary - non-transparent background - monochrome */\n\n:host(.ic-button-variant-tertiary.background.monochrome) .button,\n:host(.ic-button-variant-icon-tertiary.background.monochrome) .button {\n  background-color: var(--ic-button-tertiary-background-monochrome);\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon-tertiary.background.monochrome) ::slotted(a) {\n  background-color: var(--ic-button-tertiary-background-monochrome) !important;\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) .button:hover,\n:host(.ic-button-variant-icon-tertiary.background.monochrome) .button:hover {\n  background-image: var(\n    --ic-button-tertiary-background-non-transparent-monochrome-hover\n  );\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a:hover),\n:host(.ic-button-variant-icon-tertiary.background.monochrome)\n  ::slotted(a:hover) {\n  background-image: var(\n    --ic-button-tertiary-background-non-transparent-monochrome-hover\n  ) !important;\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) .button:active,\n:host(.ic-button-variant-icon-tertiary.background.monochrome) .button:active {\n  background-image: var(\n    --ic-button-tertiary-background-non-transparent-monochrome-active\n  );\n}\n\n:host(.ic-button-variant-tertiary.background.monochrome) ::slotted(a:active),\n:host(.ic-button-variant-icon-tertiary.background.monochrome)\n  ::slotted(a:active) {\n  background-image: var(\n    --ic-button-tertiary-background-non-transparent-monochrome-active\n  ) !important;\n}\n\n/* Destructive */\n\n:host(.ic-button-variant-destructive) .button,\n:host(.ic-button-variant-icon-destructive) .button {\n  color: var(--ic-button-destructive-text);\n  background-color: var(--ic-button-destructive-background);\n  text-transform: uppercase;\n}\n\n:host(.ic-button-variant-destructive) ::slotted(a),\n:host(.ic-button-variant-icon-destructive) ::slotted(a) {\n  color: var(--ic-button-destructive-text) !important;\n\n  --ic-typography-color: var(--ic-button-destructive-text) !important;\n\n  background-color: var(--ic-button-destructive-background) !important;\n  text-transform: uppercase !important;\n}\n\n:host(.ic-button-variant-destructive) .button:hover,\n:host(.ic-button-variant-icon-destructive) .button:hover {\n  background-color: var(--ic-button-destructive-background-hover);\n}\n\n:host(.ic-button-variant-destructive) ::slotted(a:hover),\n:host(.ic-button-variant-icon-destructive) ::slotted(a:hover) {\n  background-color: var(--ic-button-destructive-background-hover) !important;\n}\n\n:host(.ic-button-variant-destructive) .button:active,\n:host(.ic-button-variant-destructive.ic-button-loading) .button,\n:host(.ic-button-variant-icon-destructive.ic-button-loading) .button {\n  color: var(--ic-button-primary-text);\n  background-color: var(--ic-button-destructive-background-pressed);\n\n  --button-loading-inner-color: var(--ic-button-primary-text);\n  --button-loading-outer-color: var(--ic-button-destructive-background-pressed);\n}\n\n:host(.ic-button-variant-destructive) ::slotted(a:active),\n:host(.ic-button-variant-icon-destructive) ::slotted(a:active) {\n  background-color: var(--ic-button-destructive-background-pressed) !important;\n}\n\n:host(.ic-button-variant-destructive.ic-button-disabled) .button,\n:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button {\n  background-color: var(--ic-button-destructive-background-disabled);\n  color: var(--ic-button-destructive-text-disabled);\n}\n\n:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a),\n:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a) {\n  background-color: var(--ic-button-destructive-background-disabled) !important;\n}\n\n/***********************\n     Icon Variants\n ***********************/\n\n/* Icon */\n\n:host(.ic-button-variant-icon) .button {\n  color: var(--ic-button-icon-color);\n  background-color: var(--ic-button-icon-color-background);\n  min-width: 0;\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon) ::slotted(a) {\n  color: var(--ic-button-icon-color);\n  background-color: var(--ic-button-icon-color-background) !important;\n  min-width: 0;\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n}\n\n:host(.ic-button-variant-icon) .button:hover {\n  color: var(--ic-button-icon-color-hover);\n  background-color: var(--ic-button-icon-color-background-hover);\n}\n\n:host(.ic-button-variant-icon) ::slotted(a:hover) {\n  color: var(--ic-button-icon-color-hover);\n  background-color: var(--ic-button-icon-color-background-hover) !important;\n}\n\n:host(.ic-button-variant-icon) .button:active:not(:focus),\n:host(.ic-button-variant-icon.ic-button-loading) .button {\n  color: var(--ic-button-icon-color-active);\n  background-color: var(--ic-button-icon-color-background-active);\n}\n\n:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)) {\n  color: var(--ic-button-icon-color-active);\n  background-color: var(--ic-button-icon-color-background-active) !important;\n}\n\n:host(.ic-button-variant-icon.ic-button-disabled) .button {\n  color: var(--ic-color-icon-disabled-mid);\n  background: none;\n}\n\n:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a) {\n  color: var(--ic-color-icon-disabled-mid);\n  background: none !important;\n}\n\n/* Icon-primary */\n\n:host(.ic-button-variant-icon-primary) .button,\n:host(.ic-button-variant-icon-primary) ::slotted(a) {\n  min-width: 0;\n  gap: var(--ic-space-xs);\n  color: var(--ic-button-primary-icon);\n}\n\n:host(.ic-button-variant-icon-primary.monochrome) .button,\n:host(.ic-button-variant-primary.monochrome:not(.ic-button-disabled))\n  ::slotted(svg) {\n  color: var(--ic-button-primary-icon-monochrome);\n}\n\n:host(.ic-button-variant-icon-primary) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n  margin: 0;\n  pointer-events: none;\n}\n\n:host(.ic-button-variant-icon.monochrome) ::slotted(a),\n:host(.ic-button-variant-icon.monochrome) ::slotted(svg) {\n  color: var(--ic-button-icon-monochrome);\n}\n\n/* Icon-secondary */\n\n:host(.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-variant-icon-secondary) ::slotted(a) {\n  min-width: 0;\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon-secondary) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n  margin: 0;\n  pointer-events: none;\n}\n\n/* Icon-tertiary */\n\n:host(.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-variant-icon-tertiary) ::slotted(a) {\n  min-width: 0;\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon-tertiary) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n  margin: 0;\n  pointer-events: none;\n}\n\n/* Icon-destructive */\n\n:host(.ic-button-variant-icon-destructive) .button,\n:host(.ic-button-variant-icon-destructive) ::slotted(a) {\n  min-width: 0;\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-button-variant-icon-destructive) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n  margin: 0;\n  pointer-events: none;\n}\n\n/* Sizing */\n\n:host(.ic-button-size-medium) .button {\n  height: var(--height, 2.5rem);\n  padding: var(--ic-space-xs) var(--ic-space-md);\n}\n\n:host(.ic-button-size-medium) ::slotted(a) {\n  height: var(--height, 2.5rem) !important;\n  padding: var(--ic-space-xs) var(--ic-space-md) !important;\n}\n\n:host(.ic-button-size-small) .button {\n  height: var(--height, var(--ic-space-xl));\n  padding: var(--ic-space-xxs) var(--ic-space-md);\n}\n\n:host(.ic-button-size-small) ::slotted(a) {\n  height: var(--height, var(--ic-space-xl)) !important;\n  padding: var(--ic-space-xxs) var(--ic-space-md) !important;\n}\n\n:host(.ic-button-size-large) .button {\n  height: var(--height, var(--ic-space-xxl));\n  padding: var(--ic-space-sm) var(--ic-space-md);\n}\n\n:host(.ic-button-size-large) ::slotted(a) {\n  height: var(--height, var(--ic-space-xxl)) !important;\n  padding: var(--ic-space-sm) var(--ic-space-md) !important;\n}\n\n:host(.ic-button-size-medium.ic-button-variant-icon) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button {\n  height: var(--height, var(--ic-space-xl));\n  width: var(--ic-space-xl);\n  padding: 0.375rem;\n}\n\n:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),\n:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),\n:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),\n:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a) {\n  height: var(--height, var(--ic-space-xl)) !important;\n  width: var(--ic-space-xl) !important;\n  padding: 0.375rem !important;\n}\n\n:host(.ic-button-size-small.ic-button-variant-icon) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button {\n  height: var(--height, var(--ic-space-lg));\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxs);\n}\n\n:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),\n:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a) {\n  height: var(--height, var(--ic-space-lg)) !important;\n  width: var(--ic-space-lg) !important;\n  padding: var(--ic-space-xxs) !important;\n}\n\n:host(.ic-button-size-large.ic-button-variant-icon) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button {\n  height: var(--height, 2.5rem);\n  width: 2.5rem;\n  padding: var(--ic-space-xs);\n}\n\n:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,\n:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),\n:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a) {\n  height: var(--height, 2.5rem) !important;\n  width: 2.5rem !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n/* Width */\n:host(.ic-button-full-width),\n:host(.ic-button-full-width) .button {\n  width: 100%;\n}\n\n:host(.ic-button-full-width) ::slotted(a) {\n  width: 100% !important;\n}\n\n/* Loading */\n\ndiv.loading-container {\n  position: relative;\n  align-items: center;\n  width: 100%;\n}\n\n.loading-indicator-icon-button {\n  --circular-diameter: var(--ic-space-md);\n}\n\n:host(.ic-button-size-small) .loading-indicator-icon-button {\n  --circular-diameter: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n}\n\n:host(.ic-button-size-large) .loading-indicator-icon-button {\n  --circular-diameter: calc(var(--ic-space-sm) + var(--ic-space-xs));\n}\n\nic-loading-indicator {\n  --inner-color: var(--button-loading-inner-color);\n  --outer-color: var(--button-loading-outer-color), transparent;\n}\n\n@keyframes loading-animation {\n  0% {\n    width: 0%;\n    left: 0%;\n  }\n\n  25% {\n    width: 0%;\n    left: 0%;\n    opacity: 0;\n  }\n\n  50% {\n    width: 100%;\n    left: 0%;\n    opacity: 1;\n  }\n\n  75% {\n    width: 0%;\n    left: 100%;\n  }\n\n  100% {\n    width: 0%;\n    left: 100%;\n    opacity: 0;\n  }\n}\n\n/* Icons */\n\ndiv.icon-container {\n  box-sizing: border-box;\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: var(--ic-space-xs);\n}\n\ndiv.right-icon {\n  margin-right: auto;\n  margin-left: var(--ic-space-xs);\n}\n\n:host(.ic-button-full-width) .right-icon {\n  margin-right: var(--ic-space-xs);\n}\n\n::slotted(:not(ic-badge)) {\n  width: var(--icon-width) !important;\n  height: var(--icon-height) !important;\n  fill: currentcolor !important;\n  pointer-events: none;\n}\n\n:host(.ic-button-variant-icon) .button .icon-container {\n  margin: 0;\n  pointer-events: none;\n}\n\n/** SEARCH **/\n\n:host(.search-submit-button) ::slotted(svg) {\n  --icon-height: 1.25rem;\n  --icon-width: 1.25rem;\n\n  color: var(--ic-atoms-input-search-button);\n}\n\n:host(.search-submit-button-small) ::slotted(svg) {\n  --icon-height: 1rem;\n  --icon-width: 1rem;\n\n  color: var(--ic-atoms-input-search-button);\n}\n\n:host(.search-submit-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.search-submit-button) .button:not(:active):focus {\n  box-shadow: none;\n  background-color: var(--ic-action-default-bg-hover);\n}\n\n:host(.search-submit-button) .button:not(:active):focus ::slotted(svg) {\n  color: var(--ic-button-primary-text);\n}\n\n:host(.search-submit-button) {\n  display: flex;\n  align-items: center;\n  margin: 0 var(--ic-space-xxs);\n}\n\n/** CLEAR & DISMISS **/\n\n:host(.ic-button-variant-icon) .button,\n:host(.ic-button-variant-icon) ::slotted(a) {\n  background-color: inherit;\n  min-width: 0;\n  gap: var(--ic-space-xs);\n}\n\n:host(.button-variant-icon) .button,\n:host(.button-variant-icon) ::slotted(a) {\n  color: var(--button-default);\n  min-width: 0;\n  gap: var(--ic-space-xs);\n}\n\n:host(.button-variant-icon) .icon-container {\n  width: var(--ic-space-lg) !important;\n  height: var(--ic-space-lg) !important;\n}\n\n:host(.button-variant-icon) .button:hover,\n:host(.button-variant-icon) ::slotted(a:hover) {\n  background-color: var(--button-default-background-hover);\n  color: var(--button-default-hover);\n}\n\n:host(.button-variant-icon) .button:active:not(:focus),\n:host(.button-variant-icon) ::slotted(a:active:not(:focus)),\n:host(.button-variant-icon.loading) .button {\n  background-color: var(--button-default-background-active);\n  color: var(--button-default-active);\n}\n\n:host(.button-variant-icon.disabled) .button,\n:host(.button-variant-icon.disabled) ::slotted(a) {\n  color: var(--ic-color-icon-disabled-mid);\n  background: none;\n}\n\n:host(.clear-button) {\n  color: var(--ic-atoms-input-clear-button);\n  margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus,\n:host(.calendar-button) .button:focus,\n:host(.clock-button) .button:focus {\n  box-shadow: none;\n}\n\n:host(.clear-button) .button,\n:host(.clear-button) ::slotted(a) {\n  background-color: inherit;\n  color: var(--ic-atoms-input-clear-button);\n}\n\n:host(.clear-button) .button:hover,\n:host(.clear-button) ::slotted(a:hover) {\n  color: var(--ic-atoms-input-clear-button);\n}\n\n:host(.clear-button) .button:not(:active):focus ::slotted(svg) {\n  background-color: var(--ic-atoms-input-clear-button-focus-inner);\n  color: var(--ic-button-primary-text);\n\n  /* border: var(--ic-atoms-input-clear-button-focus-outer); */\n}\n\n:host(.menu-close-button) ::slotted(svg) {\n  --icon-height: 0.875rem;\n  --icon-width: 0.875rem;\n\n  color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.popout-menu-button) .button {\n  height: var(--height);\n  justify-content: left;\n  border-radius: 0;\n  white-space: pre-line;\n  text-align: start;\n}\n\n:host(.popout-menu-button) div.icon-container {\n  flex: none;\n}\n\n:host(.popout-menu-button) .button:focus {\n  box-shadow: var(--ic-border-focus-inset);\n  border-radius: var(--ic-border-radius-inset);\n}\n\n.ic-button-describedby {\n  display: none;\n}\n\n:host .ic-tooltip {\n  display: block;\n}\n\n/** Dropdown **/\n\n:host .arrow-dropdown {\n  margin-top: auto;\n}\n\n:host .dropdown-expanded {\n  transform: rotate(180deg);\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n:host(.dropdown-no-icon) .button {\n  padding-right: var(--ic-space-xs);\n}\n\n/** Slotted router item **/\n\nslot[name=\"router-item\"]::slotted(a) {\n  pointer-events: all;\n}\n\n::slotted(a) {\n  font-size: 0.875rem !important;\n  border: none !important;\n  vertical-align: middle !important;\n}\n\n/** menu button on top navigation\\side navigation \n  * uses secondary monochrome tokens which are duplicated here to avoid multiple copies in each component\n  */\n\n:host(#menu-button.ic-theme-dark) {\n  --ic-button-secondary-background-hover-monochrome: var(\n    --ic-action-dark-bg-hover\n  );\n  --ic-button-secondary-background-pressed-monochrome: var(\n    --ic-action-dark-bg-pressed\n  );\n  --ic-button-secondary-text-hover-monochrome: var(\n    --ic-action-monochrome-hover-dark\n  );\n  --ic-button-secondary-text-pressed-monochrome: var(\n    --ic-action-monochrome-pressed-dark\n  );\n  --ic-button-secondary-border-hover-monochrome: var(\n    --ic-color-border-neutral-hover-dark\n  );\n  --ic-button-secondary-border-pressed-monochrome: var(\n    --ic-color-border-neutral-pressed-dark\n  );\n}\n\n:host(#menu-button.ic-theme-light) {\n  --ic-button-secondary-background-hover-monochrome: var(\n    --ic-action-light-bg-hover\n  );\n  --ic-button-secondary-background-pressed-monochrome: var(\n    --ic-action-light-bg-pressed\n  );\n  --ic-button-secondary-text-hover-monochrome: var(\n    --ic-action-monochrome-hover\n  );\n  --ic-button-secondary-text-pressed-monochrome: var(\n    --ic-action-monochrome-pressed\n  );\n  --ic-button-secondary-border-hover-monochrome: var(\n    --ic-color-border-neutral-hover-light\n  );\n  --ic-button-secondary-border-pressed-monochrome: var(\n    --ic-color-border-neutral-default\n  );\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .button,\n  ::slotted(a) {\n    border: 0.125rem solid transparent !important;\n  }\n\n  .search-submit-button ::slotted(a),\n  .ic-button-variant-icon ::slotted(a),\n  .clear-button ::slotted(a),\n  .search-submit-button ::slotted(svg),\n  .ic-button-variant-icon ::slotted(svg),\n  .clear-button ::slotted(svg) {\n    color: HighlightText;\n  }\n\n  :host(.ic-button-variant-icon.monochrome) ::slotted(a),\n  :host(.ic-button-variant-icon.monochrome) ::slotted(svg) {\n    color: white;\n  }\n\n  :host(.clear-button) .button:not(:active):focus ::slotted(svg) {\n    color: white !important;\n    background-color: inherit;\n  }\n\n  :host(.ic-button-variant-primary:not(.ic-button-disabled)) ::slotted(svg) {\n    color: currentcolor !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .button,\n  ::slotted(a) {\n    transition: none;\n  }\n}\n\n/** Pagination **/\n\n:host(.flip) ::slotted(svg) {\n  transform: scaleX(-1);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  forceUpdate,\n  h,\n  Watch,\n  Fragment,\n} from \"@stencil/core\";\n\nimport {\n  getBrandFromContext,\n  handleHiddenFormButtonClick,\n  inheritAttributes,\n  isSlotUsed,\n  removeDisabledFalse,\n  renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport { IcButtonTypes, IcButtonVariants } from \"./ic-button.types\";\nimport {\n  IcSizes,\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcThemeMode,\n  IcButtonTooltipPlacement,\n  IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/**\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.\n */\n@Component({\n  tag: \"ic-button\",\n  styleUrl: \"ic-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Button {\n  private buttonEl?: HTMLElement;\n  private buttonIdNum = buttonIds++;\n  private hasTooltip = false;\n  private id: string | null;\n  private inheritedAttributes: { [k: string]: string } = {};\n  private describedbyEl: HTMLElement | null = null;\n  private describedById?: string;\n  private mutationObserver: MutationObserver | null = null;\n  private hostMutationObserver: MutationObserver | null = null;\n  private routerSlot: HTMLElement | null;\n\n  @Element() el: HTMLIcButtonElement;\n\n  @State() ariaLabel = \"\";\n  @State() describedbyNode: Node | null;\n  @Watch(\"describedbyNode\")\n  watchDescribedbyNodeHandler(): void {\n    this.updateAriaDescribedbyClone();\n  }\n  @State() title = \"\";\n\n  /**\n   * If `fileUpload` is set to `true`, this is the accepted list of file types.\n   */\n  @Prop() accept = \"*\";\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaControlsId?: string | boolean;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwnsId?: string | boolean;\n\n  /**\n   * If `true`, the button will be in disabled state.\n   */\n  @Prop() disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied.\n   */\n  @Prop() disableTooltip = false;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download: string | boolean = false;\n\n  /**\n   * If `true`, the button will show a dropdown icon.\n   */\n  @Prop() dropdown = false;\n\n  /**\n   * If `true`, the aria-expanded value will be set to true. This is only applied if the dropdown prop is also true.\n   */\n  @Prop({ mutable: true, reflect: true }) dropdownExpanded = false;\n\n  /**\n   * If `true`, when the button is clicked the native file explorer will be launched.\n   */\n  @Prop() fileUpload = false;\n\n  /**\n   * The name of the control for the file input, which is submitted with the form data.\n   */\n  @Prop() fileInputName = `ic-button-file-upload-input-${buttonIds++}`;\n\n  /**\n   * The <form> element to associate the button with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the button's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * If `true`, the button will fill the width of the container.\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * The URL that the link points to. This will render the button as an \"a\" tag.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * If `true`, the button will be in loading state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n   */\n  @Prop({ mutable: true }) monochrome = false;\n\n  /**\n   * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.\n   */\n  @Prop() multiple = false;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The list of the files that have been selected by a user.\n   */\n  @Prop() selectedFiles?: FileList;\n\n  /**\n   * The size of the button to be displayed.\n   */\n  @Prop() size: IcSizes = \"medium\";\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n  /**\n   * Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n   */\n  @Prop() tooltipFixedPositioning: boolean = false;\n\n  /**\n   * The position of the tooltip in relation to the button.\n   */\n  @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n  /**\n   * If `true`, the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading.\n   */\n  @Prop() transparentBackground = true;\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type: IcButtonTypes = \"button\";\n\n  /**\n   * The variant of the button to be displayed.\n   */\n  @Prop({ mutable: true }) variant: IcButtonVariants = \"primary\";\n  @Watch(\"variant\")\n  watchVariantHandler(newVariant: IcButtonVariants): void {\n    if (newVariant === \"icon\") this.variant = \"icon-tertiary\";\n  }\n\n  /**\n   * Emitted when button has blur\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * If `fileUpload` is set to `true`, this will be emitted when a file is selected in the native explorer.\n   */\n  @Event() icFileSelection!: EventEmitter<FileList>;\n\n  /**\n   * Emitted when button has focus\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillUpdate(): void {\n    if (this.loading) {\n      this.el.style.setProperty(\n        \"--min-width\",\n        `${this.el.getBoundingClientRect().width}px`\n      );\n    }\n    this.setHasTooltip();\n  }\n\n  componentWillLoad(): void {\n    const {\n      title,\n      \"aria-label\": ariaLabel,\n      ...restInheritedAttributes\n    } = inheritAttributes(this.el, [...IC_INHERITED_ARIA, \"title\"]);\n\n    this.title = title;\n    this.ariaLabel = ariaLabel;\n    this.inheritedAttributes = restInheritedAttributes;\n\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.el.setAttribute(\"exportparts\", \"button\");\n\n    this.id = this.el.id || null;\n    this.setHasTooltip();\n\n    if (!this.hasTooltip) {\n      const describedById = this.inheritedAttributes[\"aria-describedby\"];\n      if (describedById) {\n        this.describedById = describedById;\n        const el = document.querySelector<HTMLElement>(`#${describedById}`);\n        if (el) {\n          this.describedbyEl = el;\n          this.describedbyNode = el.cloneNode(true);\n        }\n      }\n    }\n\n    if (this.variant === \"icon\") {\n      this.variant = \"icon-tertiary\";\n    }\n  }\n\n  componentDidLoad(): void {\n    this.updateTheme();\n\n    if (typeof MutationObserver !== \"undefined\") {\n      if (this.describedbyEl && this.describedById) {\n        this.mutationObserver = new MutationObserver(this.mutationCallback);\n        this.mutationObserver.observe(this.describedbyEl, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n\n      this.hostMutationObserver = new MutationObserver(\n        this.hostMutationCallback\n      );\n      this.hostMutationObserver.observe(this.el, {\n        attributes: true,\n      });\n\n      if (this.hasRouterSlot()) this.arrangeRouterItem();\n    }\n\n    this.updateAriaDescribedbyClone();\n  }\n\n  componentWillRender(): void {\n    const iconEl = this.getSlottedIcon(\"left\") || this.getSlottedIcon(\"right\");\n    iconEl?.setAttribute(\"viewBox\", \"0 0 24 24\");\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (!this.hasRouterSlot()) {\n      if (this.fileUpload) {\n        renderFileHiddenInput(\n          this.icFileSelection,\n          this.el,\n          !!this.multiple,\n          !!this.disabled,\n          this.accept,\n          this.fileInputName,\n          this.selectedFiles\n        );\n      }\n      if (this.disabled || this.loading) {\n        event.stopImmediatePropagation();\n      }\n      if (this.dropdown) {\n        this.dropdownExpanded = !this.dropdownExpanded;\n      }\n    }\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the native `button`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.buttonEl?.focus();\n  }\n\n  private async closeButtonTooltip(ev: KeyboardEvent) {\n    const tooltip = this.el.shadowRoot?.querySelector(\"ic-tooltip\");\n    if (tooltip && (await tooltip.isTooltipVisible())) {\n      tooltip.displayTooltip(false);\n      ev.preventDefault();\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  private getSlottedIcon = (position: IcIconPlacementOptions) =>\n    this.el.querySelector(`[slot=\"${position}-icon\"]`);\n\n  private hasRouterSlot() {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  private handleClick = () => {\n    if (\n      (this.el.type === \"submit\" || this.el.type === \"reset\") &&\n      !this.hasRouterSlot() &&\n      (this.form || !!this.el.closest(\"FORM\"))\n    ) {\n      const form = this.form\n        ? document.querySelector<HTMLFormElement>(`form[id=${this.form}]`)\n        : this.el.closest<HTMLFormElement>(\"FORM\");\n\n      handleHiddenFormButtonClick(form, this.el);\n    }\n  };\n\n  private handleKeyDown = (ev: KeyboardEvent) => {\n    if (ev.key === \"Escape\" && this.hasTooltip) {\n      this.closeButtonTooltip(ev);\n    }\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private updateTheme(mode: IcBrandForeground | null = null) {\n    const foregroundColor = getBrandFromContext(this.el, mode);\n    if (foregroundColor !== IcBrandForegroundEnum.Default) {\n      this.theme =\n        foregroundColor === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n      this.monochrome = true;\n    }\n  }\n\n  /**\n   * Creates/updates clone of aria-describedby element node tree in shadow dom\n   * Required due to ids being scoped to the shadow dom\n   */\n  private updateAriaDescribedbyClone = () => {\n    if (this.describedbyNode) {\n      const wrapper = this.el.shadowRoot?.querySelector(\"#describedby-wrapper\");\n      if (!wrapper) {\n        this.el.shadowRoot?.appendChild(\n          Object.assign(document.createElement(\"div\"), {\n            id: \"describedby-wrapper\",\n            className: \"ic-button-describedby\",\n          })\n        );\n      }\n\n      while (wrapper?.firstChild) wrapper.firstChild.remove();\n      wrapper?.appendChild(this.describedbyNode);\n    }\n  };\n\n  /**\n   * Triggered when light dom aria-describedby element updates\n   */\n  private mutationCallback = () => {\n    if (this.describedbyEl)\n      this.describedbyNode = this.describedbyEl?.cloneNode(true);\n  };\n\n  /**\n   * Triggered when attributes of host element change\n   * @param mutationList the list of changes made to the host element\n   */\n  private hostMutationCallback = (mutationList: MutationRecord[]) => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (attributeName) {\n        const attribute = this.el.getAttribute(attributeName);\n        if (attribute) {\n          if (attributeName === \"title\") this.title = attribute;\n          else if (attributeName === \"aria-label\") this.ariaLabel = attribute;\n\n          if (IC_INHERITED_ARIA.includes(attributeName)) {\n            this.inheritedAttributes[attributeName] = attribute;\n            forceComponentUpdate = true;\n          }\n        }\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  private setHasTooltip = () => {\n    this.hasTooltip =\n      !this.disableTooltip && (!!this.title || !!this.isIconVariant());\n  };\n\n  private isIconVariant = () => this.variant.startsWith(\"icon\");\n\n  private arrangeRouterItem = () => {\n    const setStyles = (\n      element: HTMLElement | SVGElement,\n      styles: { [key: string]: string }\n    ) => {\n      Object.entries(styles).forEach(([key, value]) => {\n        element.style.setProperty(key, value);\n      });\n    };\n\n    if (this.routerSlot) {\n      const icTypography = document.createElement(\"ic-typography\");\n\n      setStyles(icTypography, {\n        \"font-family\": \"var(--ic-font-body-family)\",\n        \"font-size\": \"0.875rem\",\n        \"font-weight\": \"600\",\n      });\n      setStyles(this.routerSlot, {\n        gap: \"0\",\n      });\n\n      const icon = this.routerSlot.querySelector(\"svg\");\n      const iconSlot = icon?.getAttribute(\"slot\");\n      const iconWrapper = document.createElement(\"div\");\n\n      if (icon) {\n        setStyles(icon, {\n          fill: \"currentcolor\",\n        });\n\n        if (iconSlot === \"top-icon\") {\n          setStyles(this.routerSlot, {\n            display: \"flex\",\n            \"flex-direction\": \"column\",\n            \"--height\": \"fit-content\",\n          });\n        } else if (iconSlot) {\n          const marginPlacement = iconSlot === \"left-icon\" ? \"right\" : \"left\";\n          setStyles(iconWrapper, {\n            [`margin-${marginPlacement}`]: \"var(--ic-space-xs)\",\n          });\n        }\n\n        iconWrapper.append(icon);\n      }\n\n      const badge = this.routerSlot.querySelector(\"ic-badge\");\n      const label = this.routerSlot.textContent?.trim();\n\n      if (badge) iconWrapper.append(badge);\n      if (label) icTypography.textContent = label;\n\n      this.routerSlot.textContent = \"\";\n\n      if (iconSlot === \"right-icon\") {\n        this.routerSlot.append(icTypography);\n        this.routerSlot.append(iconWrapper);\n      } else {\n        this.routerSlot.append(iconWrapper);\n        this.routerSlot.append(icTypography);\n      }\n    }\n  };\n\n  render() {\n    const {\n      ariaControlsId,\n      ariaLabel,\n      ariaOwnsId,\n      buttonIdNum,\n      describedById,\n      disabled,\n      download,\n      dropdown,\n      dropdownExpanded,\n      form,\n      formaction,\n      formenctype,\n      formmethod,\n      formnovalidate,\n      formtarget,\n      fullWidth,\n      handleClick,\n      handleKeyDown,\n      hasTooltip,\n      href,\n      hreflang,\n      id,\n      inheritedAttributes,\n      isIconVariant,\n      loading,\n      monochrome,\n      onBlur,\n      onFocus,\n      referrerpolicy,\n      rel,\n      size,\n      target,\n      theme,\n      title,\n      tooltipFixedPositioning,\n      tooltipPlacement,\n      transparentBackground,\n      type,\n      variant,\n    } = this;\n\n    const TagType = href ? \"a\" : \"button\";\n    const buttonAttrs =\n      TagType === \"button\"\n        ? {\n            type,\n            disabled,\n            form,\n            formaction,\n            formenctype,\n            formmethod,\n            formnovalidate,\n            formtarget,\n          }\n        : {\n            download: download !== false ? download : null,\n            href,\n            rel,\n            target,\n            referrerpolicy,\n            hreflang,\n          };\n\n    const buttonId = hasTooltip\n      ? `ic-button-with-tooltip-${id || buttonIdNum}`\n      : undefined;\n\n    const describedby = !hasTooltip ? describedById : `ic-tooltip-${buttonId}`;\n\n    const hasLeftIcon = !!this.getSlottedIcon(\"left\");\n    const hasRightIcon = !!this.getSlottedIcon(\"right\");\n\n    const ButtonContent = () =>\n      this.hasRouterSlot() ? (\n        <slot name=\"router-item\"></slot>\n      ) : (\n        <TagType\n          class=\"button\"\n          tabindex={0}\n          aria-disabled={loading || disabled ? \"true\" : null}\n          aria-label={loading ? \"Loading\" : ariaLabel}\n          aria-expanded={dropdown && `${dropdownExpanded}`}\n          {...buttonAttrs}\n          {...inheritedAttributes}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          ref={(el) => (this.buttonEl = el)}\n          aria-describedby={describedby}\n          part=\"button\"\n        >\n          {loading ? (\n            <div class=\"loading-container\">\n              <ic-loading-indicator\n                type={isIconVariant() ? \"circular\" : \"linear\"}\n                class={{ \"loading-indicator-icon-button\": isIconVariant() }}\n                monochrome={monochrome}\n                theme={theme}\n              ></ic-loading-indicator>\n            </div>\n          ) : (\n            <Fragment>\n              {(hasLeftIcon ||\n                (!!this.getSlottedIcon(\"top\") && !hasRightIcon)) && (\n                <div class=\"icon-container\">\n                  <slot name={`${hasLeftIcon ? \"left\" : \"top\"}-icon`} />\n                </div>\n              )}\n              <slot />\n              {!dropdown\n                ? hasRightIcon && (\n                    <div class={{ \"icon-container\": true, \"right-icon\": true }}>\n                      <slot name=\"right-icon\" />\n                    </div>\n                  )\n                : variant !== \"icon\" &&\n                  variant !== \"destructive\" && (\n                    <span\n                      class={\n                        dropdownExpanded\n                          ? \"dropdown-expanded\"\n                          : \"arrow-dropdown\"\n                      }\n                      innerHTML={arrowDropdown}\n                    />\n                  )}\n            </Fragment>\n          )}\n        </TagType>\n      );\n\n    return (\n      <Host\n        class={{\n          \"ic-button-disabled\": disabled && !loading,\n          \"ic-button-full-width\": fullWidth,\n          \"ic-button-loading\": loading,\n          [`ic-button-size-${size}`]: true,\n          [`ic-button-variant-${variant}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          background:\n            (variant === \"secondary\" || variant === \"tertiary\") &&\n            !transparentBackground &&\n            !disabled,\n          \"dropdown-no-icon\":\n            dropdown &&\n            !isSlotUsed(this.el, \"icon\") &&\n            !isSlotUsed(this.el, \"left-icon\"),\n          monochrome,\n          \"top-icon\": isSlotUsed(this.el, \"top-icon\"),\n          \"with-badge\": isSlotUsed(this.el, \"badge\"),\n        }}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        aria-owns={ariaOwnsId}\n        aria-controls={ariaControlsId}\n        aria-expanded={dropdown && `${dropdownExpanded}`}\n      >\n        {hasTooltip && (\n          <ic-tooltip\n            id={describedby}\n            label={title || ariaLabel}\n            target={buttonId}\n            placement={tooltipPlacement}\n            fixedPositioning={tooltipFixedPositioning}\n            silent={isIconVariant() && !!ariaLabel}\n          >\n            <ButtonContent />\n          </ic-tooltip>\n        )}\n        {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        {!hasTooltip && <ButtonContent />}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-card-horizontal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcCardHorizontal extends Components.IcCardHorizontal, HTMLElement {}
+export const IcCardHorizontal: {
+    prototype: IcCardHorizontal;
+    new (): IcCardHorizontal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ic-card-horizontal.js

@@ -0,0 +1,214 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { r as removeDisabledFalse, i as isSlotUsed, o as onComponentRequiredPropUndefined, e as renderDynamicChildSlots, g as getBrandFromContext, I as IcBrandForegroundEnum } from './helpers.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const icCardHorizontalCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;--card-max-width:550px;--image-size:132px;--message-max-lines:2}.card.small{--card-max-width:360px;--image-size:calc(var(--ic-space-sm) * 10)}.card.small.spacious{--image-size:100px}.card.large{--card-max-width:1130px;--image-size:164px;--message-max-lines:3}.card.large .card-message{margin-top:var(--ic-space-md)}a{text-decoration:none !important;color:var(--ic-card-text-primary) !important}button{border:none;background-color:transparent;outline:var(--ic-hc-focus-outline);padding:0}.card,.card.clickable{display:flex;flex-direction:row;border:var(--ic-space-1px) solid var(--ic-card-border-primary);border-radius:var(--ic-border-radius);box-sizing:border-box;text-align:left;color:var(--ic-card-text-primary);transition:var(--ic-easing-transition-fast);position:relative;max-width:var(--card-max-width);height:-moz-fit-content;height:fit-content;width:var(--card-horizontal-width, -moz-fit-content);width:var(--card-horizontal-width, fit-content)}.dark.card,.dark.card.clickable{border:var(--ic-border-width) solid\n    var(--ic-color-border-neutral-pressed-dark)}.card.clickable:hover{background-color:var(--ic-card-background-hover);border:var(--ic-space-1px) solid var(--ic-card-hover-border-color);cursor:pointer}.card.clickable:focus,.card.clickable.focussed{background-color:var(--ic-card-background-hover);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border:var(--ic-space-1px) solid var(--ic-card-pressed-border-color)}.card.clickable:active{background-color:var(--ic-card-background-pressed);box-shadow:var(--ic-border-focus)}.card.disabled{border:var(--ic-space-1px) dashed var(--ic-card-disabled-border-color)}.card-header{display:flex;align-items:center}.icon{display:flex;align-items:center;padding-right:var(--ic-space-xs)}.card ::slotted(svg){fill:var(--ic-card-icon)}.card.disabled ::slotted(svg){fill:var(--ic-card-icon-disabled)}.card.clickable .card-title{--ic-typography-color:var(--ic-card-clickable-text);color:var(--ic-card-clickable-text);text-decoration:underline;text-decoration-thickness:var(--ic-space-1px)}.card.clickable:hover .card-title,.card.clickable:focus .card-title,.card.clickable.focussed .card-title{display:inline-block;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.card.clickable:active .card-title{text-decoration:none}.card.disabled .card-title{text-decoration:underline;text-decoration-thickness:var(--ic-space-1px);text-decoration-color:var(--ic-card-disabled-text);color:var(--ic-card-disabled-text);--ic-typography-color:var(--ic-card-disabled-text)}.card-message{margin-top:var(--ic-space-xs);align-items:left}.card.disabled .card-message,.card.disabled .subheading{--ic-typography-color:var(--ic-card-disabled-text)}.image{display:flex}.image ::slotted([slot=\"image-left\"]),.image ::slotted([slot=\"image-right\"]){height:var(--image-size);width:var(--image-size)}.image ::slotted([slot=\"image-left\"]){border-radius:var(--ic-space-1px) 0 0 var(--ic-space-1px)}.image ::slotted([slot=\"image-right\"]){border-radius:0 var(--ic-space-1px) var(--ic-space-1px) 0}.card-content{display:flex;flex-direction:column;padding:var(--ic-space-md)}.card .card-title ::slotted([slot=\"heading\"]),.card .card-title ic-typography p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(var(--card-max-width) - var(--ic-space-xl))}.card.with-icon .card-title ::slotted([slot=\"heading\"]),.card.with-icon .card-title ic-typography p{max-width:calc(var(--card-max-width) - (2 * var(--ic-space-xl)))}.card.with-image .card-title ::slotted([slot=\"heading\"]),.card.with-image .card-title ic-typography p{max-width:calc(\n    var(--card-max-width) - var(--image-size) - var(--ic-space-xl)\n  )}.card.with-image.with-icon .card-title ::slotted([slot=\"heading\"]),.card.with-image.with-icon .card-title ic-typography p{max-width:calc(\n    var(--card-max-width) - var(--image-size) - (2 * var(--ic-space-xl))\n  )}.card .card-message ::slotted([slot=\"message\"]),.card .card-message ic-typography{display:-webkit-box;-webkit-box-orient:vertical;line-clamp:var(--message-max-lines, initial);-webkit-line-clamp:var(--message-max-lines, initial);overflow:hidden}.card.spacious{padding:var(--ic-space-md)}.card.spacious .card-content{padding:0}.card.spacious .card-content.left-image{padding:0 0 0 var(--ic-space-md)}.card.spacious .card-content.right-image{padding:0 var(--ic-space-md) 0 0}.card.spacious .image ::slotted([slot=\"image-left\"]),.card.spacious .image ::slotted([slot=\"image-right\"]){border-radius:var(--ic-border-radius)}.interaction-button{margin-left:auto}.adornment{margin-top:var(--ic-space-xxs)}.subheading{margin-top:var(--ic-space-xxs)}.card-title.with-interaction-button{margin-right:var(--ic-space-md)}::slotted(p),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){line-height:normal}@media (forced-colors: active){.card ::slotted(svg){fill:currentcolor}.card.disabled ::slotted(svg){fill:GrayText !important}.card.disabled{border-color:GrayText !important}.card.disabled .card-message,.card.disabled .card-title,.card.disabled .subheading{color:GrayText;--ic-typography-color:GrayText}}@media (prefers-reduced-motion: reduce){.card,.card.clickable{transition:none}}";
+const IcCardHorizontalStyle0 = icCardHorizontalCss;
+
+const CardHorizontal = /*@__PURE__*/ proxyCustomElement(class CardHorizontal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.hostMutationObserver = null;
+        this.IMAGE_LEFT = "image-left";
+        this.IMAGE_RIGHT = "image-right";
+        this.INTERACTION_BUTTON = "interaction-button";
+        this.appearance = "default";
+        this.isFocussed = false;
+        this.parentEl = null;
+        this.parentIsAnchorTag = false;
+        /**
+         * If `true`, the horizontal card will be a clickable variant, instead of static.
+         */
+        this.clickable = false;
+        /**
+         * The padding of the horizontal card.
+         */
+        this.density = "default";
+        /**
+         * If `true`, the horizontal card will be disabled if it is clickable.
+         */
+        this.disabled = false;
+        /**
+         * The human language of the linked URL.
+         */
+        this.hreflang = "";
+        /**
+         * The main body message of the horizontal card.
+         */
+        this.message = "";
+        /**
+         * The size of the horizontal card.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        this.parentFocussed = () => {
+            this.isFocussed = true;
+        };
+        this.parentBlurred = () => {
+            this.isFocussed = false;
+        };
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.parentEl && this.parentIsAnchorTag) {
+            this.parentEl.removeEventListener("focus", this.parentFocussed);
+            this.parentEl.removeEventListener("blur", this.parentBlurred);
+        }
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentWillLoad() {
+        var _a;
+        this.parentEl = this.el.parentElement;
+        if (((_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.tagName) === "A") {
+            this.clickable = true;
+            this.parentIsAnchorTag = true;
+            this.parentEl.classList.add("ic-card-wrapper-link");
+            this.parentEl.addEventListener("focus", this.parentFocussed);
+            this.parentEl.addEventListener("blur", this.parentBlurred);
+        }
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        !isSlotUsed(this.el, "heading") &&
+            onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Card");
+        this.updateTheme();
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, [
+            "message",
+            "adornment",
+            this.IMAGE_LEFT,
+            this.IMAGE_RIGHT,
+            "icon",
+            this.INTERACTION_BUTTON,
+            "badge",
+        ], this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
+    }
+    handleHostClick(event) {
+        if (this.disabled) {
+            event.stopImmediatePropagation();
+        }
+    }
+    brandChangeHandler(ev) {
+        this.updateTheme(ev.detail.mode);
+    }
+    /**
+     * Sets focus on the card.
+     */
+    async setFocus() {
+        var _a, _b;
+        const linkElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("a");
+        const buttonElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
+        if (linkElement) {
+            linkElement.focus();
+        }
+        else if (buttonElement) {
+            buttonElement.focus();
+        }
+    }
+    updateTheme(mode) {
+        const foregroundColor = getBrandFromContext(this.el, mode);
+        if (foregroundColor !== IcBrandForegroundEnum.Default) {
+            this.theme =
+                foregroundColor === IcBrandForegroundEnum.Light
+                    ? IcBrandForegroundEnum.Dark
+                    : IcBrandForegroundEnum.Light;
+        }
+    }
+    render() {
+        const { appearance, clickable, density, disabled, heading, message, href, hreflang, referrerpolicy, rel, target, parentIsAnchorTag, isFocussed, size, subheading, theme, } = this;
+        const Component = parentIsAnchorTag || !clickable
+            ? "div"
+            : href === undefined
+                ? "button"
+                : "a";
+        const attrs = Component == "a" && {
+            href: href,
+            hrefLang: hreflang,
+            referrerPolicy: referrerpolicy,
+            rel: rel,
+            target: target,
+        };
+        const hasLeftImage = isSlotUsed(this.el, this.IMAGE_LEFT);
+        const hasRightImage = isSlotUsed(this.el, this.IMAGE_RIGHT);
+        return (h(Host, { key: '993936c23981131f47a6a861fa5a674f7ac719a6', class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h(Component, Object.assign({ key: 'a2db6c5abb6998c35f151d99dddb2735413f3bc1', class: {
+                card: true,
+                clickable: clickable && !disabled,
+                disabled,
+                focussed: isFocussed,
+                dark: appearance === IcBrandForegroundEnum.Dark,
+                [`${size}`]: true,
+                "with-icon": isSlotUsed(this.el, "icon"),
+                "with-image": hasLeftImage || hasRightImage,
+                spacious: density === "spacious",
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : undefined, disabled: disabled ? true : undefined }, attrs), hasLeftImage && (h("div", { key: '656083f09459cc16f8447b91eebb3c659b85da5c', class: "image" }, h("slot", { key: '1b840cba21192c53adf23100a9098caeeec437e1', name: "image-left" }))), h("div", { key: '2e2d7beac8517384366bcf8d06bac8287b87c891', class: {
+                "card-content": true,
+                "left-image": hasLeftImage,
+                "right-image": hasRightImage,
+            } }, h("div", { key: 'e3c9df4624522f1e06010b7dbee8117e32e9776c', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: '4e76a0b208d5ded1b78eb2b5a767cda857a37209', class: "icon" }, h("slot", { key: 'ca49f56e2c2ee3597cd6a617e9e0c87023398f6f', name: "icon" }))), h("div", { key: 'ce88138ce249e4f72eb84c5094f13823b191d623', class: {
+                "card-title": true,
+                "with-interaction-button": isSlotUsed(this.el, this.INTERACTION_BUTTON),
+            } }, h("slot", { key: 'cf3047258572bb2df6a880dbe78cdfb997138e52', name: "heading" }, h("ic-typography", { key: '2a953b2db51d4d5ad87cd951f71be15e8b6a9123', variant: "h4" }, h("p", { key: '778d1c565dda268e52e30e435593f1205ab4c8f6' }, heading)))), isSlotUsed(this.el, this.INTERACTION_BUTTON) && (h("div", { key: '9c13abe27f6ccf4a5d33505dacdf3a3da63fcc61', class: "interaction-button" }, h("slot", { key: '72180f00ff5a341450e0cc58fdd4e4e674446dca', name: "interaction-button" })))), density === "spacious" &&
+            (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '84de830afde5f4b9c05d8699c5ea72fb995c68dc', class: "subheading" }, h("slot", { key: '343d4addd3a8e6b175bb8cd4c6f30143d89655e9', name: "subheading" }, h("ic-typography", { key: '7dc39433145b52a210cac6963b46ceeab46214e0', variant: "subtitle-small" }, subheading)))), density === "spacious" && isSlotUsed(this.el, "adornment") && (h("div", { key: 'eba46f8b6532f8a54a893baded9ea2ec19e5db2f', class: "adornment" }, h("slot", { key: 'b200296d06d2decfeeef24c80b7c7a651b9ce9bb', name: "adornment" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: 'af361ff1a144a2fa7d6fdccd881e93c244824587', class: "card-message" }, message && (h("ic-typography", { key: '49567589e624e4b971e798233fdf31c7be932374', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '84726023327a15b33785348f7aeb19ab93bded55', name: "message" })))), isSlotUsed(this.el, "badge") && h("slot", { key: 'ee75df75084b53a768c83cf2f11471f846030549', name: "badge" }), hasRightImage && (h("div", { key: '47b257898c62169e72626d990f762b361bea35b6', class: "image" }, h("slot", { key: '31af6d4ee374ac40c2ee3903ac94c75a409fb46a', name: "image-right" }))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
+    static get style() { return IcCardHorizontalStyle0; }
+}, [1, "ic-card-horizontal", {
+        "clickable": [1028],
+        "density": [1],
+        "disabled": [4],
+        "heading": [1],
+        "href": [1],
+        "hreflang": [1],
+        "message": [1],
+        "referrerpolicy": [1],
+        "rel": [1],
+        "size": [1],
+        "subheading": [1],
+        "target": [1],
+        "theme": [1],
+        "appearance": [32],
+        "isFocussed": [32],
+        "parentEl": [32],
+        "parentIsAnchorTag": [32],
+        "setFocus": [64]
+    }, [[2, "click", "handleHostClick"], [4, "brandChange", "brandChangeHandler"]], {
+        "disabled": ["watchDisabledHandler"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-card-horizontal", "ic-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-card-horizontal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardHorizontal);
+            }
+            break;
+        case "ic-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IcCardHorizontal = CardHorizontal;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcCardHorizontal, defineCustomElement };
+
+//# sourceMappingURL=ic-card-horizontal.js.map

package/components/ic-card-horizontal.js.map

@@ -0,0 +1 @@
+{"file":"ic-card-horizontal.js","mappings":"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","names":[],"sources":["src/components/ic-card-horizontal/ic-card-horizontal.css?tag=ic-card-horizontal&encapsulation=shadow","src/components/ic-card-horizontal/ic-card-horizontal.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n  * @prop --card-horizontal-width: Width of the horizontal card\n  */\n\n:host {\n  display: flex;\n\n  --card-max-width: 550px;\n  --image-size: 132px;\n  --message-max-lines: 2;\n}\n\n.card.small {\n  --card-max-width: 360px;\n  --image-size: calc(var(--ic-space-sm) * 10);\n}\n\n.card.small.spacious {\n  --image-size: 100px;\n}\n\n.card.large {\n  --card-max-width: 1130px;\n  --image-size: 164px;\n  --message-max-lines: 3;\n}\n\n.card.large .card-message {\n  margin-top: var(--ic-space-md);\n}\n\na {\n  text-decoration: none !important;\n  color: var(--ic-card-text-primary) !important;\n}\n\nbutton {\n  border: none;\n  background-color: transparent;\n  outline: var(--ic-hc-focus-outline);\n  padding: 0;\n}\n\n.card,\n.card.clickable {\n  display: flex;\n  flex-direction: row;\n  border: var(--ic-space-1px) solid var(--ic-card-border-primary);\n  border-radius: var(--ic-border-radius);\n  box-sizing: border-box;\n  text-align: left;\n  color: var(--ic-card-text-primary);\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n  max-width: var(--card-max-width);\n  height: fit-content;\n  width: var(--card-horizontal-width, fit-content);\n}\n\n.dark.card,\n.dark.card.clickable {\n  border: var(--ic-border-width) solid\n    var(--ic-color-border-neutral-pressed-dark);\n}\n\n.card.clickable:hover {\n  background-color: var(--ic-card-background-hover);\n  border: var(--ic-space-1px) solid var(--ic-card-hover-border-color);\n  cursor: pointer;\n}\n\n.card.clickable:focus,\n.card.clickable.focussed {\n  background-color: var(--ic-card-background-hover);\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  border: var(--ic-space-1px) solid var(--ic-card-pressed-border-color);\n}\n\n.card.clickable:active {\n  background-color: var(--ic-card-background-pressed);\n  box-shadow: var(--ic-border-focus);\n}\n\n.card.disabled {\n  border: var(--ic-space-1px) dashed var(--ic-card-disabled-border-color);\n}\n\n.card-header {\n  display: flex;\n  align-items: center;\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  padding-right: var(--ic-space-xs);\n}\n\n.card ::slotted(svg) {\n  fill: var(--ic-card-icon);\n}\n\n.card.disabled ::slotted(svg) {\n  fill: var(--ic-card-icon-disabled);\n}\n\n.card.clickable .card-title {\n  --ic-typography-color: var(--ic-card-clickable-text);\n\n  color: var(--ic-card-clickable-text);\n  text-decoration: underline;\n  text-decoration-thickness: var(--ic-space-1px);\n}\n\n.card.clickable:hover .card-title,\n.card.clickable:focus .card-title,\n.card.clickable.focussed .card-title {\n  display: inline-block;\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n.card.clickable:active .card-title {\n  text-decoration: none;\n}\n\n.card.disabled .card-title {\n  text-decoration: underline;\n  text-decoration-thickness: var(--ic-space-1px);\n  text-decoration-color: var(--ic-card-disabled-text);\n  color: var(--ic-card-disabled-text);\n\n  --ic-typography-color: var(--ic-card-disabled-text);\n}\n\n.card-message {\n  margin-top: var(--ic-space-xs);\n  align-items: left;\n}\n\n.card.disabled .card-message,\n.card.disabled .subheading {\n  --ic-typography-color: var(--ic-card-disabled-text);\n}\n\n.image {\n  display: flex;\n}\n\n.image ::slotted([slot=\"image-left\"]),\n.image ::slotted([slot=\"image-right\"]) {\n  height: var(--image-size);\n  width: var(--image-size);\n}\n\n.image ::slotted([slot=\"image-left\"]) {\n  border-radius: var(--ic-space-1px) 0 0 var(--ic-space-1px);\n}\n\n.image ::slotted([slot=\"image-right\"]) {\n  border-radius: 0 var(--ic-space-1px) var(--ic-space-1px) 0;\n}\n\n.card-content {\n  display: flex;\n  flex-direction: column;\n  padding: var(--ic-space-md);\n}\n\n.card .card-title ::slotted([slot=\"heading\"]),\n.card .card-title ic-typography p {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: calc(var(--card-max-width) - var(--ic-space-xl));\n}\n\n.card.with-icon .card-title ::slotted([slot=\"heading\"]),\n.card.with-icon .card-title ic-typography p {\n  max-width: calc(var(--card-max-width) - (2 * var(--ic-space-xl)));\n}\n\n.card.with-image .card-title ::slotted([slot=\"heading\"]),\n.card.with-image .card-title ic-typography p {\n  max-width: calc(\n    var(--card-max-width) - var(--image-size) - var(--ic-space-xl)\n  );\n}\n\n.card.with-image.with-icon .card-title ::slotted([slot=\"heading\"]),\n.card.with-image.with-icon .card-title ic-typography p {\n  max-width: calc(\n    var(--card-max-width) - var(--image-size) - (2 * var(--ic-space-xl))\n  );\n}\n\n.card .card-message ::slotted([slot=\"message\"]),\n.card .card-message ic-typography {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  line-clamp: var(--message-max-lines, initial);\n  -webkit-line-clamp: var(--message-max-lines, initial);\n  overflow: hidden;\n}\n\n.card.spacious {\n  padding: var(--ic-space-md);\n}\n\n.card.spacious .card-content {\n  padding: 0;\n}\n\n.card.spacious .card-content.left-image {\n  padding: 0 0 0 var(--ic-space-md);\n}\n\n.card.spacious .card-content.right-image {\n  padding: 0 var(--ic-space-md) 0 0;\n}\n\n.card.spacious .image ::slotted([slot=\"image-left\"]),\n.card.spacious .image ::slotted([slot=\"image-right\"]) {\n  border-radius: var(--ic-border-radius);\n}\n\n.interaction-button {\n  margin-left: auto;\n}\n\n.adornment {\n  margin-top: var(--ic-space-xxs);\n}\n\n.subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n.card-title.with-interaction-button {\n  margin-right: var(--ic-space-md);\n}\n\n::slotted(p),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6) {\n  line-height: normal;\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  .card ::slotted(svg) {\n    fill: currentcolor;\n  }\n\n  .card.disabled ::slotted(svg) {\n    fill: GrayText !important;\n  }\n\n  .card.disabled {\n    border-color: GrayText !important;\n  }\n\n  .card.disabled .card-message,\n  .card.disabled .card-title,\n  .card.disabled .subheading {\n    color: GrayText;\n\n    --ic-typography-color: GrayText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .card,\n  .card.clickable {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcCardDensity,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  getBrandFromContext,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\n\n/**\n * @slot heading - Content will be placed at the top of the horizontal card to the right of the icon.\n * @slot message - Content will be placed in the main body of the horizontal card.\n * @slot subheading - Content will be placed below the card heading. Only for `density=\"spacious\"`.\n * @slot adornment - Content will be placed below the card subheading. Only for `density=\"spacious\"`.\n * @slot image-left - Content will be placed to the left of all other content.\n * @slot image-right - Content will be placed to the right of all other content.\n * @slot icon - Content will be placed to the left of the horizontal card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot badge - Badge component overlaying the top right of the horizontal card.\n */\n@Component({\n  tag: \"ic-card-horizontal\",\n  styleUrl: \"ic-card-horizontal.css\",\n  shadow: true,\n})\nexport class CardHorizontal {\n  private hostMutationObserver: MutationObserver | null = null;\n  private IMAGE_LEFT = \"image-left\";\n  private IMAGE_RIGHT = \"image-right\";\n  private INTERACTION_BUTTON = \"interaction-button\";\n\n  @Element() el: HTMLIcCardHorizontalElement;\n\n  @State() appearance?: IcBrandForeground = \"default\";\n  @State() isFocussed: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the horizontal card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable: boolean = false;\n\n  /**\n   * The padding of the horizontal card.\n   */\n  @Prop() density: IcCardDensity = \"default\";\n\n  /**\n   * If `true`, the horizontal card will be disabled if it is clickable.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The heading for the horizontal card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable horizontal card link points to. If set, the clickable horizontal card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the horizontal card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The size of the horizontal card.\n   */\n  @Prop() size: IcSizes = \"medium\";\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.parentEl && this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl?.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(\n        mutationList,\n        [\n          \"message\",\n          \"adornment\",\n          this.IMAGE_LEFT,\n          this.IMAGE_RIGHT,\n          \"icon\",\n          this.INTERACTION_BUTTON,\n          \"badge\",\n        ],\n        this\n      )\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const linkElement = this.el.shadowRoot?.querySelector(\"a\");\n    const buttonElement = this.el.shadowRoot?.querySelector(\"button\");\n    if (linkElement) {\n      linkElement.focus();\n    } else if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(mode?: IcBrandForeground): void {\n    const foregroundColor = getBrandFromContext(this.el, mode);\n\n    if (foregroundColor !== IcBrandForegroundEnum.Default) {\n      this.theme =\n        foregroundColor === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  render() {\n    const {\n      appearance,\n      clickable,\n      density,\n      disabled,\n      heading,\n      message,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      parentIsAnchorTag,\n      isFocussed,\n      size,\n      subheading,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    const hasLeftImage = isSlotUsed(this.el, this.IMAGE_LEFT);\n    const hasRightImage = isSlotUsed(this.el, this.IMAGE_RIGHT);\n\n    return (\n      <Host class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}>\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            focussed: isFocussed,\n            dark: appearance === IcBrandForegroundEnum.Dark,\n            [`${size}`]: true,\n            \"with-icon\": isSlotUsed(this.el, \"icon\"),\n            \"with-image\": hasLeftImage || hasRightImage,\n            spacious: density === \"spacious\",\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : undefined}\n          aria-disabled={disabled ? \"true\" : undefined}\n          disabled={disabled ? true : undefined}\n          {...attrs}\n        >\n          {hasLeftImage && (\n            <div class=\"image\">\n              <slot name=\"image-left\"></slot>\n            </div>\n          )}\n          <div\n            class={{\n              \"card-content\": true,\n              \"left-image\": hasLeftImage,\n              \"right-image\": hasRightImage,\n            }}\n          >\n            <div class=\"card-header\">\n              {isSlotUsed(this.el, \"icon\") && (\n                <div class=\"icon\">\n                  <slot name=\"icon\" />\n                </div>\n              )}\n              <div\n                class={{\n                  \"card-title\": true,\n                  \"with-interaction-button\": isSlotUsed(\n                    this.el,\n                    this.INTERACTION_BUTTON\n                  ),\n                }}\n              >\n                <slot name=\"heading\">\n                  <ic-typography variant=\"h4\">\n                    <p>{heading}</p>\n                  </ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, this.INTERACTION_BUTTON) && (\n                <div class=\"interaction-button\">\n                  <slot name=\"interaction-button\"></slot>\n                </div>\n              )}\n            </div>\n            {density === \"spacious\" &&\n              (subheading || isSlotUsed(this.el, \"subheading\")) && (\n                <div class=\"subheading\">\n                  <slot name=\"subheading\">\n                    <ic-typography variant=\"subtitle-small\">\n                      {subheading}\n                    </ic-typography>\n                  </slot>\n                </div>\n              )}\n            {density === \"spacious\" && isSlotUsed(this.el, \"adornment\") && (\n              <div class=\"adornment\">\n                <slot name=\"adornment\"></slot>\n              </div>\n            )}\n            {(message || isSlotUsed(this.el, \"message\")) && (\n              <div class=\"card-message\">\n                {message && (\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                )}\n                {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n              </div>\n            )}\n          </div>\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          {hasRightImage && (\n            <div class=\"image\">\n              <slot name=\"image-right\"></slot>\n            </div>\n          )}\n        </Component>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ic-card-vertical.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IcCardVertical extends Components.IcCardVertical, HTMLElement {}
+export const IcCardVertical: {
+    prototype: IcCardVertical;
+    new (): IcCardVertical;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;