npm - @ukic/web-components - Versions diffs - 3.7.0 → 3.8.0 - Mend

@ukic/web-components 3.7.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (413) hide show

package/dist/components/ic-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
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\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 margin: 0 var(--ic-space-xxs);\n}\n\n:host(.clear-button) .button:focus,\n:host(.calendar-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) {\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 box-shadow: none;\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/ 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 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() describedByContent? = \"\";\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 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() variant: IcButtonVariants = \"primary\";\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 = this.el.parentElement?.querySelector<HTMLElement>(\n `#${describedById}`\n );\n if (el) {\n this.describedByContent = el.innerText;\n this.describedbyEl = el;\n }\n }\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\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.el.closest(\"FORM\")\n ) {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n this.el.closest(\"FORM\")?.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\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 Triggered when text content of sibling element in light DOM changes\n /\n private mutationCallback = () => {\n this.describedByContent = this.describedbyEl?.innerText;\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 describedByContent,\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 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\n ? describedById\n : variant !== \"icon\" \|\| !ariaLabel\n ? `ic-tooltip-${buttonId}`\n : undefined;\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=\"linear\"\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 silent={isIconVariant() && !!ariaLabel}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!hasTooltip && <ButtonContent />}\n {describedByContent && (\n <span id={describedby} class=\"ic-button-describedby\">\n {describedByContent}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
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\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/ 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 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() describedByContent? = \"\";\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 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() variant: IcButtonVariants = \"primary\";\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 = this.el.parentElement?.querySelector<HTMLElement>(\n `#${describedById}`\n );\n if (el) {\n this.describedByContent = el.innerText;\n this.describedbyEl = el;\n }\n }\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\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.el.closest(\"FORM\")\n ) {\n const hiddenFormButton = document.createElement(\"button\");\n\n hiddenFormButton.setAttribute(\"type\", this.el.type);\n hiddenFormButton.style.display = \"none\";\n\n this.el.closest(\"FORM\")?.appendChild(hiddenFormButton);\n\n hiddenFormButton.click();\n hiddenFormButton.remove();\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 Triggered when text content of sibling element in light DOM changes\n /\n private mutationCallback = () => {\n this.describedByContent = this.describedbyEl?.innerText;\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 describedByContent,\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 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\n ? describedById\n : variant !== \"icon\" \|\| !ariaLabel\n ? `ic-tooltip-${buttonId}`\n : undefined;\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=\"linear\"\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 silent={isIconVariant() && !!ariaLabel}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!hasTooltip && <ButtonContent />}\n {describedByContent && (\n <span id={describedby} class=\"ic-button-describedby\">\n {describedByContent}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-card-vertical.js CHANGED Viewed

@@ -145,19 +145,19 @@ const CardVertical = /*@__PURE__*/ proxyCustomElement(class CardVertical extends
             rel: rel,
             target: target,
         };
-        return (h(Host, { key: 'd62f341e096d81fa917e578aa55c99d6d828c9e3', class: {
+        return (h(Host, { key: '2dc8070692fc796401c84c6156d1f66c8053310a', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h(Component, Object.assign({ key: '742b03d9281d850a9052638038980b45ca567c17', class: {
+            } }, h(Component, Object.assign({ key: 'a1a8763990ed7e5ac5eecfc69e4b29ab184b9e6e', class: {
                 card: true,
                 clickable: !!clickable && !disabled,
                 disabled: !!disabled,
                 fullwidth: !!fullWidth,
                 focussed: isFocussed,
                 monochrome: monochrome,
-            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : null, disabled: disabled }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { key: 'd5f584871df498cf11acb97ff3694115d4819a73', class: "image-top" }, h("slot", { key: '88fa5d9566421a5ca724622bb11b0ad593babecb', name: "image-top" }))), h("div", { key: '3211c93ebca0fcddad4ac7ce75999ab8d7939442', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: 'c80cf3c24f0cbdf7cac901ee8c945c4d1432fe9f', class: "icon" }, h("slot", { key: '7e087604510f545b891f104f972ee50ac686b9be', name: "icon" }))), h("div", { key: '02bc7be8d85faee7b497c2b2608d80f70b79ec86', class: "card-title" }, h("slot", { key: 'e5285ad53121d899dd27966860b664fe1ecc388f', name: "heading" }, h("ic-typography", { key: '00573eddbbdd537b86a1331bd2b2db4a443a13c0', variant: "h4" }, h("p", { key: 'bccc52bc8feadd3abe0cd8092819258dc2e155c8' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: 'f9f2baeee122976ab5ffa8e3dff9027bb78db6b4', class: "interaction-button" }, h("slot", { key: '01b087c7b7ff9fa54dfb1171c5a4899cf090b45c', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: '81f19c8c0d726ebbb35f71375a35fac342e4e7cd', class: "subheading" }, h("slot", { key: '17c871d9694857824afb3c9f7593c8498873d810', name: "subheading" }, h("ic-typography", { key: '9ca1068e95a3c69def8ec0bf82135dd36ed57fbc', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: 'e43dadfb629c3a5dd28a6b1c46555dfade8d498f', class: "adornment" }, h("slot", { key: 'b8f63d79ffaff166020d643497ad8b92f4580a0e', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: '1077bd869310c629a1b154e031dbed14559798b7', class: "image-mid" }, h("slot", { key: 'f598c5ddfb5a591f3988c49b3f7be1e84fb87552', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '08d46a26aac3972495cc7724ff8fbd55cc90a31c', class: "card-message" }, message && (h("ic-typography", { key: '50c632b1ac9fed137e668ceec4f1fe35f9a2cf99', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '2b971484237d985d4318993477d39b5f6d1e8f0d', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: '3e7f6bc8df858349187486fb9e9ebec56d42d0a5', class: "interaction-area" }, h("div", { key: '4fd96e05aa6daef84d93d8f1da4dd80b2d349623', class: "interaction-controls" }, h("slot", { key: '2f690307f464bb1f710344723b2f76078334ea30', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: '9880fae8f9a52bdfe1820df5cbfc92af33080e2a', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: '0d1656a001fa061ebae17757a560ba11dae90339', class: {
+            }, tabindex: clickable && !parentIsAnchorTag ? 0 : undefined, "aria-disabled": disabled ? "true" : null, disabled: disabled }, attrs), isSlotUsed(this.el, "image-top") && (h("div", { key: '2c12f461a8b8972d8a4de1a6560a2c52ecadc36f', class: "image-top" }, h("slot", { key: '9afec40e5ef6b57a10ca922d7f3da378f962200f', name: "image-top" }))), h("div", { key: 'bb92939da24dbfa2fb2e4bc2606d4f7ef9d2ba37', class: "card-header" }, isSlotUsed(this.el, "icon") && (h("div", { key: '165af9342325b430548209cf2bcd5b9781b752fd', class: "icon" }, h("slot", { key: '4b2cdd47b1f2abfc16097dee848b630c93c1b835', name: "icon" }))), h("div", { key: '02f1b6357a696bc43b9d5cc7c8030647b52e311c', class: "card-title" }, h("slot", { key: 'b71ca0fa6a4aeb1cf75579920a66f58abe11d5ae', name: "heading" }, h("ic-typography", { key: '63f9c6478987888f41a53d5beadec2b3deaa52ae', variant: "h4" }, h("p", { key: '6d642c20d4656a408cf439c969a1895cb834c15e' }, heading)))), isSlotUsed(this.el, "interaction-button") && (h("div", { key: '7a44d7d2c17cd980fa14da2a65aa68ddd8832f77', class: "interaction-button" }, h("slot", { key: '6a9e0f0ca96125d94d39b31474c82ffe088ea475', name: "interaction-button" })))), (subheading || isSlotUsed(this.el, "subheading")) && (h("div", { key: 'dc19ca8ae488c30aa1fc58e56db23fc0dc2a2c0f', class: "subheading" }, h("slot", { key: 'bae9a057f813ef5c5df04befed60d09ccb106857', name: "subheading" }, h("ic-typography", { key: '13a32e2d9bc3258b65edf8a5c385f181f39a2c8d', variant: "subtitle-small" }, subheading)))), isSlotUsed(this.el, "adornment") && (h("div", { key: 'c359631c9d1ed0643290e1db2a5e521d6702b29d', class: "adornment" }, h("slot", { key: '398a65927df066f96bffc5b59b95fd27ec558c12', name: "adornment" }))), isSlotUsed(this.el, "image-mid") && (h("div", { key: '463a2495779d1faca6efd98a3e1425e3486fc0d1', class: "image-mid" }, h("slot", { key: '049daa3cbf2542b0a47951a8758bb50a1ad699e2', name: "image-mid" }))), (message || isSlotUsed(this.el, "message")) && (h("div", { key: '9f6b4ea8e3a8cfa0e8ad58366f4e2a198cb0f8f6', class: "card-message" }, message && (h("ic-typography", { key: '1a32ff3958de50ea5732a0fb52616d04c6ebedcc', variant: "body" }, message)), isSlotUsed(this.el, "message") && h("slot", { key: '0dabb8f6ed9bd42a0982284fa4976734c0d5e16f', name: "message" }))), (isSlotUsed(this.el, "interaction-controls") || expandable) && (h("div", { key: '2d6292c895df325c53cffc72a330720855644c59', class: "interaction-area" }, h("div", { key: 'a8c4c10d85a5608f49dbccb8cb65443d56d64a3f', class: "interaction-controls" }, h("slot", { key: '5caebe86117ec6ef31d096a284aa035153e02a56', name: "interaction-controls" })), expandable && (h("ic-tooltip", { key: '1d66d84f3181cc1694cdf779befca1610c538f71', id: "ic-tooltip-expand-button", label: "Toggle expandable area", silent: true }, h("button", { key: 'eaa2b9484428dab89fb67677b80a09a6174b011b', class: {
                 "toggle-button": true,
                 [`toggle-button-${this.areaExpanded ? "expanded" : "closed"}`]: true,
-            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { key: 'dc55cb4419b35c1f5f6b771cf5dc62c1d77626a7', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: '3b0d0c87d0467ffde6e62ed49b9116280a6c7108', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'f51d29f2b88429b0e0024c6f9ba34abaf4e1a6d1', name: "badge" }))));
+            }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed(this.el, "expanded-content") && this.areaExpanded && (h("div", { key: 'd896c331bad9e027c4b56dd1fce75bc530218516', class: "expanded-content", id: "expanded-content-area" }, h("slot", { key: '7fc81de39ef8a949674f22089d413bf946befdd7', name: "expanded-content" }))), isSlotUsed(this.el, "badge") && h("slot", { key: '283bff90fab9be3b640ab7d04384d7ce2873bad8', name: "badge" }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-checkbox-group.js CHANGED Viewed

@@ -100,11 +100,11 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         const { disabled, helperText, hideLabel, label, name, required, size, theme, validationStatus, validationText, } = this;
         const describedBy = getInputDescribedByText(this.el, name, helperText !== "", validationStatus !== "");
         const renderSRText = validationStatus === "error" || required || hideLabel;
-        return (h(Host, { key: '3eab3a8d0cc27b77ac7daf1f6d3068533ab675bb', class: {
+        return (h(Host, { key: '977492f0ca432ab5dc9d7435c66cf6aafa8c44f1', class: {
                 "ic-checkbox-group-disabled": !!disabled,
                 [`ic-checkbox-group-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, renderSRText && (h("span", { key: '3cbf05ef6c6df9737d8f40ecbe6db5944f8a2406', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: 'ce2d74b5e4f88c2cdfc6b730db2b3763c48df206', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: '70a1b515ccd08e731837ee10f248163f342536b2' }, h("ic-input-label", { key: '67be3445bb1dee8a2e1ccee88f16ae58fc81c77e', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, h("slot", { key: 'be393bdcf6138057e1e0c65082817f590dbcadf7', name: "helper-text", slot: "helper-text" })))), h("div", { key: 'd43399d04efc5501f5a8b118aedbba213410593b', class: "checkboxes-container" }, h("slot", { key: '96c715128256965fb3acbe3ff5eca7bb5be9897b' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '6b4b02fd8819946472c6a0c60c050ef885168312', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+            } }, renderSRText && (h("span", { key: '5a9d1c9fcf5f1b837e4f6ff3ae516db0b105e1ac', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: 'c3afb98a671db4dba8229d461c33d4b5a69d5e31', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: 'bc4e450767c3fb6f7deb01370d9d1599d4515417' }, h("ic-input-label", { key: '7c0c76b80d4b89673495b56a79cf8a05f0a224f3', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, h("slot", { key: '348730e9c8ffbd0701a00e9380a11e403957604b', name: "helper-text", slot: "helper-text" })))), h("div", { key: 'c4065c98766a8447ed51c0a84f953cc70c529d2c', class: "checkboxes-container" }, h("slot", { key: 'cadbff332d84cf70bbbb42f1c40f4cb0bc705e38' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '0259abfb51282b2dfc8ed9aed0a2b97ccb769ac2', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-checkbox.js CHANGED Viewed

@@ -111,17 +111,17 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         checked
             ? renderHiddenInput(el, value, name, disabled)
             : removeHiddenInput(el);
-        return (h(Host, { key: 'eda047a45e6d0dc558095d7d23b16422633fe633', class: {
+        return (h(Host, { key: '153b0b333ca1d0755d4e52dd9119d48cd1c246cc', class: {
                 "ic-checkbox-disabled": disabled,
                 [`ic-checkbox-${size}`]: !!size,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '20623bca4b576eb2da3050ce19c99ad5288a6957', class: "container" }, displayIndeterminate ? (h("div", { class: "indeterminate-symbol" })) : (checked && (h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" })))), h("input", { key: '37fcfb382fc5aac6c9d07e9ce9e7929e21528c15', role: "checkbox", class: {
+            } }, h("div", { key: 'c0f56ee4fbbdd38fea208d133cdd1fa91a41d6c7', class: "container" }, displayIndeterminate ? (h("div", { class: "indeterminate-symbol" })) : (checked && (h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" })))), h("input", { key: 'f8335e54b2f765591b3781d76a01632c34065855', role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
-            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (h("ic-typography", { key: '0d8d605e8aa6dcb86362bb561a024a8c03a66854', class: "checkbox-label", variant: "body" }, h("label", { key: '3f2c395f32f47684475a7b6a1cefdb7d67c8beac', htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { key: 'a6701087045999eb177a3a743770dad9aa47c79f', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && h("div", { key: '18719e04d6854a600f87fe777fd475b424204875', class: "branch-corner" }), h("div", { key: 'a73508e06dea3c65f731db0050ca365bd31998c9', class: "dynamic-field-container" }, isDynamicAdditionalField && (h("ic-typography", { key: 'd4f422ba5eb1815418871081efc8c5cd55821775', variant: "caption" }, h("p", { key: 'd43c97bdcd3b22acc1ef3664544ca9783606ea15', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { key: '66fb65fdd27f2db8550ef58c5601391c7b88357d', class: {
+            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (h("ic-typography", { key: '2ba4862a349e6b3f34c050c434ce247687f0dfd8', class: "checkbox-label", variant: "body" }, h("label", { key: 'a3f3c733b5dc0a0acdf89d3b7db603e965102618', htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { key: 'ad38f0547dda8ce82cd107fec3f3ff9d555cc1e8', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && h("div", { key: 'd2c8566cada65dbd60546873ccbfedb33ec0e093', class: "branch-corner" }), h("div", { key: '05489504f66d7f6e79bbbf18302dd63348f2f4a7', class: "dynamic-field-container" }, isDynamicAdditionalField && (h("ic-typography", { key: 'eb397dc91080f791a4fd13e3c1815fad70c7cb87', variant: "caption" }, h("p", { key: '49633d6c0806655957055fbef51688bfdeb11411', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { key: '916e20f79f80cd7ff0fb5c4b030caf07f146ffcc', class: {
                 "additional-field-wrapper": !isDynamicAdditionalField,
-            } }, h("slot", { key: '02493cc3d3c3aae17cfb61bf1e7e12e9f41fabba', name: "additional-field" })))))));
+            } }, h("slot", { key: '5783108ca7c6edb7c55dad2cc9469549e31d7cd3', name: "additional-field" })))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-chip.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { j as convertToRGBA, k as getBrandForegroundAppearance, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed, a as isElInAGGrid } from './helpers.js';
+import { j as convertToRGBA, k as getBrandForegroundAppearance, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, f as renderDynamicChildSlots, i as isSlotUsed, a as isElInAGGrid } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
@@ -72,12 +72,20 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
         this.customColorHandler();
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, ["icon", "badge"], this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     handleClick() {
         this.visible = !this.visible;
@@ -92,10 +100,10 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
     render() {
         const { label, variant, size, dismissible, visible, disabled, hovered, theme, foregroundColor, dismissLabel, transparentBackground, } = this;
         const ariaLabel = `${label} chip`;
-        return (h(Host, { key: '9a61d8ecacb78fcdf17dbbaf32e1cf79de705d78', class: {
+        return (h(Host, { key: 'ced030b6d7a5aeb6b7030ea7858200187d16ae90', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-chip-${foregroundColor}-text`]: variant === "filled" && !!foregroundColor,
-            } }, visible && (h("div", { key: '5cfa78f3d8647cf3f6a98649bfe583af89f3458f', class: {
+            } }, visible && (h("div", { key: 'dca2da18144d1ee47d9507cbb616bc6493060f94', class: {
                 chip: true,
                 [`${variant}`]: true,
                 [`${size}`]: true,
@@ -103,7 +111,7 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
                 dismissible,
                 hovered,
                 "non-transparent": variant === "outlined" && !transparentBackground,
-            } }, isSlotUsed(this.el, "icon") && (h("div", { key: 'd7f72306a186b66c4a215a3928655989870e34b3', class: "icon" }, h("slot", { key: '71b8d9a59d43e0580e7f56c1977f2992ee582d95', name: "icon" }))), h("ic-typography", { key: '46ba6cddc7c12f2c246cc2d23e6d403517ad54b3', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": isElInAGGrid(this.el) } }, h("span", { key: '7e62d43da1b1d21a3b660839154aaaaedf96f935' }, label)), dismissible && (h("ic-tooltip", { key: 'c82c6387a16c2cf5006710b1623a332a1f5f3122', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { key: '0411f0e6d7ce468a6f7a489e652240724dee0213', id: "dismiss-icon", class: "dismiss-icon", ref: (el) => (this.buttonEl = el), "aria-label": `${dismissLabel} ${ariaLabel}`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: '31e71e22e0d9b8755a8bc483934aabcc4ccb9033', name: "badge" }))), dismissible && (h("div", { key: 'c899f3ba330e9231e461b7869363ce85ff005b31', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
+            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '3e1537327125e7cfd54a20aeeb3f6279560da02f', class: "icon" }, h("slot", { key: '33a229dad89f94f165c0a3f77e83720e1cc0603f', name: "icon" }))), h("ic-typography", { key: '7445c7ae2254c909af206b43e5044f643177f1af', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": isElInAGGrid(this.el) } }, h("span", { key: 'af34cb3ca942ea778c3ba4716f983755571626db' }, label)), dismissible && (h("ic-tooltip", { key: '7664945e7ddc8cb66a302265a5b7affcea514241', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { key: '692fd13b54eef71e29ef4d3639182617770684df', id: "dismiss-icon", class: "dismiss-icon", ref: (el) => (this.buttonEl = el), "aria-label": `${dismissLabel} ${ariaLabel}`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: '6db0a5f0dd29df3315caa52aba01d339449e3bdd', name: "badge" }))), dismissible && (h("div", { key: '2d989a411ff7eedad1e9238714c704c3e2d0d536', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-chip.js","mappings":"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","names":[],"sources":["src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n}\n\n.chip {\n --chip-bg-color: transparent;\n --chip-hover-bg: var(--ic-chip-action-hover);\n --chip-pressed-bg: var(--ic-chip-action-pressed);\n\n display: flex;\n padding: var(--ic-space-xxs);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n text-align: left;\n text-decoration: none;\n position: relative;\n background-color: var(--chip-bg-color);\n border: var(--ic-border-width) solid transparent;\n justify-content: space-between;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .chip {\n transition: var(--ic-easing-transition-fast);\n }\n}\n\n.chip.small {\n padding: var(--ic-space-xxxs);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n padding: var(--ic-space-xs);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.chip:focus-within {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\nic-tooltip:focus-within {\n z-index: 1;\n}\n\n.filled {\n --chip-bg-color: var(\n --chip-custom-color,\n var(--ic-chip-background-filled-default)\n );\n --ic-typography-color: var(\n --chip-custom-foreground-color,\n var(--ic-chip-label)\n );\n\n color: var(--chip-custom-foreground-color, var(--ic-chip-label));\n}\n\n.filled.disabled {\n --chip-bg-color: var(--ic-chip-background-filled-inactive);\n}\n\n:host(.ic-chip-dark-text) {\n --chip-custom-foreground-color: var(--ic-architectural-black);\n}\n\n:host(.ic-chip-light-text) {\n --chip-custom-foreground-color: var(--ic-architectural-white);\n}\n\n:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within) {\n --chip-hover-bg: var(--ic-action-dark-bg-hover);\n}\n\n:host(.ic-chip-dark-text) .chip.filled:focus-within {\n --chip-pressed-bg: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within) {\n --chip-hover-bg: var(--ic-action-light-bg-hover);\n}\n\n:host(.ic-chip-light-text) .chip.filled:focus-within {\n --chip-pressed-bg: var(--ic-action-light-bg-pressed);\n}\n\n.outlined {\n color: var(--ic-chip-outline-label);\n border-color: var(--chip-custom-color, var(--ic-chip-outline));\n padding: calc(var(--ic-space-xxs));\n\n --ic-typography-color: var(--ic-chip-outline-label);\n}\n\n.outlined.disabled {\n border: var(--ic-border-disabled);\n border-color: var(--ic-chip-outline-inactive);\n}\n\n.chip.disabled ic-typography {\n --ic-typography-color: var(--ic-chip-label-inactive);\n}\n\n.dismiss-icon {\n border: none;\n border-radius: 50%;\n padding: 0;\n color: currentcolor;\n background: none;\n cursor: pointer;\n margin: var(--ic-space-xxxs);\n height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n pointer-events: none;\n color: var(--ic-chip-icon-inactive);\n}\n\n.icon {\n padding: var(--ic-space-xxxs);\n box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n fill: var(--ic-chip-icon-inactive);\n}\n\n.outlined.non-transparent {\n background-color: var(--ic-chip-outline-background);\n}\n\n:host .chip.hovered:not(:focus-within) {\n background-image: linear-gradient(var(--chip-hover-bg) 0 0);\n}\n\n:host .chip:focus-within {\n background-image: linear-gradient(var(--chip-pressed-bg) 0 0);\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n right: -9999px;\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-border-hc);\n }\n\n .chip.disabled {\n appearance: none;\n border-color: GrayText;\n }\n\n .chip.disabled ic-typography {\n --ic-typography-color: GrayText;\n }\n\n .chip.disabled path,\n .chip.disabled ::slotted(svg) {\n fill: GrayText;\n }\n\n .chip:focus-within {\n outline: none;\n border-color: Highlight;\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n Watch,\n Host,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n convertToRGBA,\n isElInAGGrid,\n getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport {\n IcBrandForegroundNoDefault,\n IcColor,\n IcEmphasisType,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n private buttonEl?: HTMLButtonElement;\n\n @Element() el: HTMLIcChipElement;\n\n @State() foregroundColor: IcBrandForegroundNoDefault \| null = null;\n @State() hovered = false;\n @State() visible = true;\n\n /\n The custom chip colour. This will override the theme colour.\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor;\n @Watch(\"customColor\")\n customColorHandler(): void {\n const colorRGBA = this.customColor && convertToRGBA(this.customColor);\n if (!colorRGBA) {\n this.foregroundColor = null;\n return;\n }\n\n const { r, g, b, a } = colorRGBA;\n this.foregroundColor = getBrandForegroundAppearance(\n (r 299 + g * 587 + b * 114) / 1000\n );\n this.el.setAttribute(\n \"style\",\n `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n );\n }\n\n /*\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible = false;\n\n /\n The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.\n /\n @Prop() dismissLabel = \"Dismiss\";\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size: IcSizes = \"medium\";\n /\n Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n * Setting the \"customColor\" prop will override this.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n /\n @Prop() transparentBackground = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() variant: IcEmphasisType = \"filled\";\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.customColorHandler();\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.focus();\n }\n\n private dismissAction = () => {\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = () => {\n this.hovered = true;\n };\n\n private mouseLeaveHandler = () => {\n this.hovered = false;\n };\n\n render() {\n const {\n label,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n hovered,\n theme,\n foregroundColor,\n dismissLabel,\n transparentBackground,\n } = this;\n\n const ariaLabel = `${label} chip`;\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [`ic-chip-${foregroundColor}-text`]:\n variant === \"filled\" && !!foregroundColor,\n }}\n >\n {visible && (\n <div\n class={{\n chip: true,\n [`${variant}`]: true,\n [`${size}`]: true,\n disabled,\n dismissible,\n hovered,\n \"non-transparent\":\n variant === \"outlined\" && !transparentBackground,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class={{ label: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label={dismissLabel}\n target=\"dismiss-icon\"\n class={{ \"tooltip-disabled\": disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class=\"dismiss-icon\"\n ref={(el) => (this.buttonEl = el)}\n aria-label={`${dismissLabel} ${ariaLabel}`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )}\n {dismissible && (\n <div class=\"sr-only\" aria-live=\"polite\">\n {!visible ? `Dismissed ${ariaLabel}` : \"\"}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-chip.js","mappings":"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","names":[],"sources":["src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n}\n\n.chip {\n --chip-bg-color: transparent;\n --chip-hover-bg: var(--ic-chip-action-hover);\n --chip-pressed-bg: var(--ic-chip-action-pressed);\n\n display: flex;\n padding: var(--ic-space-xxs);\n font-size: 0.875rem;\n border-radius: var(--ic-space-md);\n text-align: left;\n text-decoration: none;\n position: relative;\n background-color: var(--chip-bg-color);\n border: var(--ic-border-width) solid transparent;\n justify-content: space-between;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .chip {\n transition: var(--ic-easing-transition-fast);\n }\n}\n\n.chip.small {\n padding: var(--ic-space-xxxs);\n border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n padding: var(--ic-space-xs);\n border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n padding: 0 var(--ic-space-xs);\n}\n\n.chip:focus-within {\n box-shadow: var(--ic-border-focus);\n outline: var(--ic-hc-focus-outline);\n z-index: 1;\n}\n\nic-tooltip:focus-within {\n z-index: 1;\n}\n\n.filled {\n --chip-bg-color: var(\n --chip-custom-color,\n var(--ic-chip-background-filled-default)\n );\n --ic-typography-color: var(\n --chip-custom-foreground-color,\n var(--ic-chip-label)\n );\n\n color: var(--chip-custom-foreground-color, var(--ic-chip-label));\n}\n\n.filled.disabled {\n --chip-bg-color: var(--ic-chip-background-filled-inactive);\n}\n\n:host(.ic-chip-dark-text) {\n --chip-custom-foreground-color: var(--ic-architectural-black);\n}\n\n:host(.ic-chip-light-text) {\n --chip-custom-foreground-color: var(--ic-architectural-white);\n}\n\n:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within) {\n --chip-hover-bg: var(--ic-action-dark-bg-hover);\n}\n\n:host(.ic-chip-dark-text) .chip.filled:focus-within {\n --chip-pressed-bg: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within) {\n --chip-hover-bg: var(--ic-action-light-bg-hover);\n}\n\n:host(.ic-chip-light-text) .chip.filled:focus-within {\n --chip-pressed-bg: var(--ic-action-light-bg-pressed);\n}\n\n.outlined {\n color: var(--ic-chip-outline-label);\n border-color: var(--chip-custom-color, var(--ic-chip-outline));\n padding: calc(var(--ic-space-xxs));\n\n --ic-typography-color: var(--ic-chip-outline-label);\n}\n\n.outlined.disabled {\n border: var(--ic-border-disabled);\n border-color: var(--ic-chip-outline-inactive);\n}\n\n.chip.disabled ic-typography {\n --ic-typography-color: var(--ic-chip-label-inactive);\n}\n\n.dismiss-icon {\n border: none;\n border-radius: 50%;\n padding: 0;\n color: currentcolor;\n background: none;\n cursor: pointer;\n margin: var(--ic-space-xxxs);\n height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n pointer-events: none;\n color: var(--ic-chip-icon-inactive);\n}\n\n.icon {\n padding: var(--ic-space-xxxs);\n box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n fill: var(--ic-chip-icon-inactive);\n}\n\n.outlined.non-transparent {\n background-color: var(--ic-chip-outline-background);\n}\n\n:host .chip.hovered:not(:focus-within) {\n background-image: linear-gradient(var(--chip-hover-bg) 0 0);\n}\n\n:host .chip:focus-within {\n background-image: linear-gradient(var(--chip-pressed-bg) 0 0);\n}\n\n.sr-only {\n position: absolute;\n left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n right: -9999px;\n}\n\n@media (forced-colors: active) {\n .chip {\n border: var(--ic-border-hc);\n }\n\n .chip.disabled {\n appearance: none;\n border-color: GrayText;\n }\n\n .chip.disabled ic-typography {\n --ic-typography-color: GrayText;\n }\n\n .chip.disabled path,\n .chip.disabled ::slotted(svg) {\n fill: GrayText;\n }\n\n .chip:focus-within {\n outline: none;\n border-color: Highlight;\n }\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Listen,\n Event,\n EventEmitter,\n Element,\n Method,\n Watch,\n Host,\n} from \"@stencil/core\";\nimport {\n onComponentRequiredPropUndefined,\n isSlotUsed,\n removeDisabledFalse,\n convertToRGBA,\n isElInAGGrid,\n getBrandForegroundAppearance,\n renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n IcBrandForegroundNoDefault,\n IcColor,\n IcEmphasisType,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/*\n @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right of the chip.\n /\n@Component({\n tag: \"ic-chip\",\n styleUrl: \"ic-chip.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Chip {\n private buttonEl?: HTMLButtonElement;\n private hostMutationObserver?: MutationObserver;\n\n @Element() el: HTMLIcChipElement;\n\n @State() foregroundColor: IcBrandForegroundNoDefault \| null = null;\n @State() hovered = false;\n @State() visible = true;\n\n /\n The custom chip colour. This will override the theme colour.\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor;\n @Watch(\"customColor\")\n customColorHandler(): void {\n const colorRGBA = this.customColor && convertToRGBA(this.customColor);\n if (!colorRGBA) {\n this.foregroundColor = null;\n return;\n }\n\n const { r, g, b, a } = colorRGBA;\n this.foregroundColor = getBrandForegroundAppearance(\n (r 299 + g * 587 + b * 114) / 1000\n );\n this.el.setAttribute(\n \"style\",\n `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n );\n }\n\n /*\n If `true`, the chip will appear disabled.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the chip will have a close button at the end to dismiss it.\n /\n @Prop() dismissible = false;\n\n /\n The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.\n /\n @Prop() dismissLabel = \"Dismiss\";\n\n /\n The text rendered within the chip.\n /\n @Prop() label!: string;\n\n /\n The size of the chip.\n /\n @Prop() size: IcSizes = \"medium\";\n /\n Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n * Setting the \"customColor\" prop will override this.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n /\n @Prop() transparentBackground = true;\n\n /\n The emphasis of the chip.\n /\n @Prop() variant: IcEmphasisType = \"filled\";\n\n /\n Is emitted when the user dismisses the chip.\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n this.customColorHandler();\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Chip\"\n );\n\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n );\n this.hostMutationObserver.observe(this.el, {\n childList: true,\n });\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleClick(): void {\n this.visible = !this.visible;\n }\n\n /\n Sets focus on the chip.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.focus();\n }\n\n private dismissAction = () => {\n this.icDismiss.emit();\n };\n\n private mouseEnterHandler = () => {\n this.hovered = true;\n };\n\n private mouseLeaveHandler = () => {\n this.hovered = false;\n };\n\n render() {\n const {\n label,\n variant,\n size,\n dismissible,\n visible,\n disabled,\n hovered,\n theme,\n foregroundColor,\n dismissLabel,\n transparentBackground,\n } = this;\n\n const ariaLabel = `${label} chip`;\n\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [`ic-chip-${foregroundColor}-text`]:\n variant === \"filled\" && !!foregroundColor,\n }}\n >\n {visible && (\n <div\n class={{\n chip: true,\n [`${variant}`]: true,\n [`${size}`]: true,\n disabled,\n dismissible,\n hovered,\n \"non-transparent\":\n variant === \"outlined\" && !transparentBackground,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && (\n <div class=\"icon\">\n <slot name=\"icon\" />\n </div>\n )}\n <ic-typography\n variant=\"label\"\n apply-vertical-margins={false}\n class={{ label: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n >\n <span>{label}</span>\n </ic-typography>\n {dismissible && (\n <ic-tooltip\n label={dismissLabel}\n target=\"dismiss-icon\"\n class={{ \"tooltip-disabled\": disabled }}\n >\n <button\n id=\"dismiss-icon\"\n class=\"dismiss-icon\"\n ref={(el) => (this.buttonEl = el)}\n aria-label={`${dismissLabel} ${ariaLabel}`}\n disabled={disabled}\n tabindex={disabled ? -1 : 0}\n onClick={this.dismissAction}\n onMouseEnter={this.mouseEnterHandler}\n onMouseLeave={this.mouseLeaveHandler}\n innerHTML={dismissIcon}\n ></button>\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </div>\n )}\n {dismissible && (\n <div class=\"sr-only\" aria-live=\"polite\">\n {!visible ? `Dismissed ${ariaLabel}` : \"\"}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-classification-banner.js CHANGED Viewed

@@ -48,10 +48,10 @@ const ClassificationBanner = /*@__PURE__*/ proxyCustomElement(class Classificati
         if (!classification ||
             (classification && !classificationText[classification]))
             classification = "default";
-        return (h(Host, { key: 'f30aac02756628e8538572d0b2cab67b0ffc4b75', class: { ["ic-classification-banner-inline"]: !!inline } }, h("banner", { key: '5eda99cbdf376e20ad9ed03fc5c7fc515805c6da', "aria-label": "Protective marking", class: {
+        return (h(Host, { key: '8ccd98249fea7e78da349f2c97243366305c5dcc', class: { ["ic-classification-banner-inline"]: !!inline } }, h("banner", { key: 'a108ace2bf5f64c5867f993d9d130595b61ccac9', "aria-label": "Protective marking", class: {
                 ["classification-banner"]: true,
                 [`${classification}`]: classification,
-            } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { key: '3f094aa6b0ed00ec4f70858a81a030b2599829f9', variant: "caption-uppercase" }, classification === "default"
+            } }, classification !== "default" ? (h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, h("ic-typography", { key: '09edc559ec7b205d092210ef73ef95faa43c1a8a', variant: "caption-uppercase" }, classification === "default"
             ? classificationText[classification]
             : `${upTo ? "up to" : ""}
                ${country}