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

@ukic/web-components 3.8.0 → 3.10.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 (503) 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 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}
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 handleHiddenFormButtonClick,\n inheritAttributes,\n isSlotUsed,\n removeDisabledFalse,\n renderFileHiddenInput,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport { IcButtonTypes, IcButtonVariants } from \"./ic-button.types\";\nimport {\n IcSizes,\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n IcButtonTooltipPlacement,\n IcIconPlacementOptions,\n} from \"../../utils/types\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet buttonIds = 0;\n\n/\n * @slot left-icon - Content will be placed to the left of the button label.\n * @slot right-icon - Content will be placed to the right of the button label.\n * @slot top-icon - Content will be placed above the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.\n /\n@Component({\n tag: \"ic-button\",\n styleUrl: \"ic-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Button {\n private buttonEl?: HTMLElement;\n private buttonIdNum = buttonIds++;\n private hasTooltip = false;\n private id: string \| null;\n private inheritedAttributes: { [k: string]: string } = {};\n private describedbyEl: HTMLElement \| null = null;\n private describedById?: string;\n private mutationObserver: MutationObserver \| null = null;\n private hostMutationObserver: MutationObserver \| null = null;\n private routerSlot: HTMLElement \| null;\n\n @Element() el: HTMLIcButtonElement;\n\n @State() ariaLabel = \"\";\n @State() 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 Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n /\n @Prop() tooltipFixedPositioning: boolean = false;\n\n /\n The position of the tooltip in relation to the button.\n /\n @Prop() tooltipPlacement: IcButtonTooltipPlacement = \"bottom\";\n\n /\n If `true`, the secondary & tertiary variants of button will have a transparent background when not hovered, pressed or loading.\n /\n @Prop() transparentBackground = true;\n\n /\n The type of the button.\n /\n @Prop() type: IcButtonTypes = \"button\";\n\n /\n The variant of the button to be displayed.\n /\n @Prop() 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.form \|\| !!this.el.closest(\"FORM\"))\n ) {\n const form = this.form\n ? document.querySelector<HTMLFormElement>(`form[id=${this.form}]`)\n : this.el.closest<HTMLFormElement>(\"FORM\");\n\n handleHiddenFormButtonClick(form, this.el);\n }\n };\n\n private handleKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === \"Escape\" && this.hasTooltip) {\n this.closeButtonTooltip(ev);\n }\n };\n\n private onFocus = () => {\n this.icFocus.emit();\n };\n\n private onBlur = () => {\n this.icBlur.emit();\n };\n\n private updateTheme(mode: IcBrandForeground \| null = null) {\n const foregroundColor = getBrandFromContext(this.el, mode);\n if (foregroundColor !== IcBrandForegroundEnum.Default) {\n this.theme =\n foregroundColor === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n this.monochrome = true;\n }\n }\n\n /\n 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 tooltipFixedPositioning,\n tooltipPlacement,\n transparentBackground,\n type,\n variant,\n } = this;\n\n const TagType = href ? \"a\" : \"button\";\n const buttonAttrs =\n TagType === \"button\"\n ? {\n type,\n disabled,\n form,\n formaction,\n formenctype,\n formmethod,\n formnovalidate,\n formtarget,\n }\n : {\n download: download !== false ? download : null,\n href,\n rel,\n target,\n referrerpolicy,\n hreflang,\n };\n\n const buttonId = hasTooltip\n ? `ic-button-with-tooltip-${id \|\| buttonIdNum}`\n : undefined;\n\n const describedby = !hasTooltip\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 fixedPositioning={tooltipFixedPositioning}\n silent={isIconVariant() && !!ariaLabel}\n >\n <ButtonContent />\n </ic-tooltip>\n )}\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n {!hasTooltip && <ButtonContent />}\n {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-checkbox-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, o as onComponentRequiredPropUndefined, v as getInputDescribedByText, w as hasValidationStatus } from './helpers.js';
+import { r as removeDisabledFalse, o as onComponentRequiredPropUndefined, w as getInputDescribedByText, x as hasValidationStatus } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-input-label2.js';
 import { d as defineCustomElement$3 } from './ic-input-validation2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, q as addFormResetListener, o as onComponentRequiredPropUndefined, s as removeFormResetListener, t as renderHiddenInput, u as removeHiddenInput, i as isSlotUsed } from './helpers.js';
+import { r as removeDisabledFalse, s as addFormResetListener, o as onComponentRequiredPropUndefined, t as removeFormResetListener, u as renderHiddenInput, v as removeHiddenInput, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-checkbox-disabled){pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.ic-data-table-checkbox) .container{padding:0;margin-bottom:0}:host(.ic-checkbox-small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-checkbox-background-unselected);border:var(--ic-border-width) solid var(--ic-checkbox-border-unselected);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host .container svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-checkbox-small) .checkbox,:host(.ic-checkbox-small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-checkbox-large) .checkbox,:host(.ic-checkbox-large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-checkbox-background-selected);border:var(--ic-border-width) solid var(--ic-checkbox-background-selected);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-checkbox-background-selected-disabled);border:var(--ic-border-width) solid\n    var(--ic-checkbox-background-selected-disabled)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-checkbox-background-indeterminate);border:0.125rem solid var(--ic-checkbox-background-indeterminate)}.checkbox:indeterminate:disabled,.checkbox.indeterminate:checked:disabled{background-color:var(--ic-checkbox-background-indeterminate-disabled);border:0.125rem solid var(--ic-checkbox-background-indeterminate-disabled)}.checkbox:checked:hover{background-color:var(--ic-checkbox-background-selected-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-checkbox-background-indeterminate-hover);border:0.125rem solid var(--ic-checkbox-background-indeterminate-hover)}.checkbox:checked:active{background-color:var(--ic-checkbox-background-selected-pressed)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-checkbox-background-indeterminate-pressed);border:0.125rem solid var(--ic-checkbox-background-indeterminate-pressed)}.checkbox:hover{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-hover);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-hover)}.checkbox:active{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-pressed)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed\n    var(--ic-checkbox-border-unselected-disabled)}.checkbox-label{color:var(--ic-checkbox-text);--ic-typography-color:var(--ic-checkbox-text)}.checkbox-label>label{padding-left:var(--ic-space-sm)}:host(.ic-checkbox-disabled) .checkbox-label{color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:var(--ic-checkbox-icon-pressed);z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.ic-checkbox-large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-checkbox-icon-indeterminate);pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.ic-checkbox-large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-checkbox-required-bar);border-left:0.125rem solid var(--ic-checkbox-required-bar)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-checkbox-required-text);--ic-typography-color:var(--ic-checkbox-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}.dynamic-field-container{flex:100%}@media (max-width: 576px){::slotted(*){--input-width:100%}.dynamic-field-container{flex:initial}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}.checkmark:dir(rtl){right:0}.checkbox-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.indeterminate-symbol:dir(rtl){right:0.288rem}.branch-corner:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}";
+const icCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-checkbox-disabled){pointer-events:none}.container{display:flex;width:-moz-fit-content;width:fit-content;padding:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);margin-bottom:var(--ic-space-xxs);align-items:center}:host(.ic-data-table-checkbox) .container{padding:0;margin-bottom:0}:host(.ic-checkbox-small) .container{margin-bottom:var(--ic-space-xxxs)}.checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-checkbox-background-unselected);border:var(--ic-border-width) solid var(--ic-checkbox-border-unselected);border-radius:var(--ic-border-radius);outline:none;cursor:pointer;transition:var(--ic-easing-transition-fast);flex-shrink:0}:host .container svg{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-checkbox-small) .checkbox,:host(.ic-checkbox-small) .container svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-checkbox-large) .checkbox,:host(.ic-checkbox-large) .container svg{width:var(--ic-space-xl);height:var(--ic-space-xl)}.checkbox:checked{background-color:var(--ic-checkbox-background-selected);border:var(--ic-border-width) solid var(--ic-checkbox-background-selected);transition:var(--ic-easing-transition-slow)}.checkbox:checked:disabled{background-color:var(--ic-checkbox-background-selected-disabled);border:var(--ic-border-width) solid\n    var(--ic-checkbox-background-selected-disabled)}.checkbox:indeterminate,.checkbox.indeterminate:checked{background-color:var(--ic-checkbox-background-indeterminate);border:0.125rem solid var(--ic-checkbox-background-indeterminate)}.checkbox:indeterminate:disabled,.checkbox.indeterminate:checked:disabled{background-color:var(--ic-checkbox-background-indeterminate-disabled);border:0.125rem solid var(--ic-checkbox-background-indeterminate-disabled)}.checkbox:checked:hover{background-color:var(--ic-checkbox-background-selected-hover)}.checkbox:indeterminate:hover,.checkbox.indeterminate:checked:hover{background-color:var(--ic-checkbox-background-indeterminate-hover);border:0.125rem solid var(--ic-checkbox-background-indeterminate-hover)}.checkbox:checked:active{background-color:var(--ic-checkbox-background-selected-pressed)}.checkbox:indeterminate:active,.checkbox.indeterminate:checked:active{background-color:var(--ic-checkbox-background-indeterminate-pressed);border:0.125rem solid var(--ic-checkbox-background-indeterminate-pressed)}.checkbox:hover{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-hover);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-hover)}.checkbox:active{box-shadow:0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);border:var(--ic-border-width) solid\n    var(--ic-checkbox-border-unselected-pressed)}.checkbox:focus{box-shadow:var(--ic-border-focus)}.checkbox:disabled{border:var(--ic-border-width) dashed\n    var(--ic-checkbox-border-unselected-disabled)}.checkbox-label{color:var(--ic-checkbox-text);--ic-typography-color:var(--ic-checkbox-text)}.checkbox-label>label{padding-left:var(--ic-space-sm);display:inline-block}:host(.ic-checkbox-disabled) .checkbox-label{color:var(--ic-checkbox-text-disabled);--ic-typography-color:var(--ic-checkbox-text-disabled)}.checkbox-label:hover{cursor:pointer}.checkmark{position:relative;right:calc(-1 * var(--ic-space-lg));margin-left:calc(-1 * var(--ic-space-lg));fill:var(--ic-checkbox-icon-pressed);z-index:1;background-color:transparent;pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .checkmark{margin-left:calc(-1 * var(--ic-space-md));right:calc(-1 * var(--ic-space-md))}:host(.ic-checkbox-large) .checkmark{margin-left:calc(-1 * var(--ic-space-xl));right:calc(-1 * var(--ic-space-xl))}.indeterminate-symbol{position:relative;width:0.875rem;height:var(--ic-space-xxxs);right:-1.188rem;margin-left:-0.875rem;z-index:1;background-color:var(--ic-checkbox-icon-indeterminate);pointer-events:none;flex-shrink:0}:host(.ic-checkbox-small) .indeterminate-symbol{width:0.6rem;right:-0.8rem;margin-left:-0.6rem}:host(.ic-checkbox-large) .indeterminate-symbol{width:1.25rem;right:-1.625rem;margin-left:-1.25rem}.additional-field-wrapper{margin-left:calc(var(--ic-space-md) + var(--ic-space-lg));margin-top:calc(var(--ic-space-sm) / 2)}.branch-corner{height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-checkbox-required-bar);border-left:0.125rem solid var(--ic-checkbox-required-bar)}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-text{color:var(--ic-checkbox-required-text);--ic-typography-color:var(--ic-checkbox-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}.dynamic-field-container{flex:100%}@media (max-width: 576px){::slotted(*){--input-width:100%}.dynamic-field-container{flex:initial}}@media (forced-colors: active){.checkbox{-webkit-appearance:revert;-moz-appearance:revert;appearance:revert;transition:none}.checkbox:checked{transition:none}.checkbox:focus-visible{outline:0.125rem solid highlight}.checkbox:disabled:not(:checked){-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.checkmark{fill:none}.indeterminate-symbol{display:none}}.checkmark:dir(rtl){right:0}.checkbox-label:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.indeterminate-symbol:dir(rtl){right:0.288rem}.branch-corner:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.dynamic-container:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}";
 const IcCheckboxStyle0 = icCheckboxCss;
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLElement {

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

	@@ -1 +1 @@
1	- {"file":"ic-checkbox.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,g/PAAg/P,CAAC;AACvgQ,yBAAe,aAAa;;MCqCf,QAAQ;IARrB;;;;;;;;QAiB2B,2BAAsB,GAC7C,QAAQ,CAAC;;;;QAK6B,YAAO,GAAG,KAAK,CAAC;QAC/C,qBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;QAKjC,aAAQ,GAAG,KAAK,CAAC;;;;QAUjB,gBAAW,GAAG,4CAA4C,CAAC;;;;QAe3D,cAAS,GAAG,KAAK,CAAC;;;;QAKlB,kBAAa,GAAG,KAAK,CAAC;QACrB,yBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;;;;QAoB3C,iCAA4B,GAAG,KAAK,CAAC;;;;QAUrC,UAAK,GAAgB,SAAS,CAAC;;;;QAK/B,UAAK,GAAG,EAAE,CAAC;QAuDX,gBAAW,GAAG;YACpB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,oBAAoB;gBACvB,CAAC,IAAI,CAAC,4BAA4B,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC;YAC3E,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;QAEM,oBAAe,GAAG;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;SACtC,CAAC;KA0GH;IA1OC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IA6BD,yBAAyB;QACvB,IAAI,CAAC,oBAAoB;YACvB,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,4BAA4B,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;KAC7E;IAqCD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAEpD,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QAClC,IAAI,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,mBAAmB,EAAE;YAClD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,aAA2C,CAAC;YAE1E,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;SACzB;KACF;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,UAAU,CACX,CAAC;KACH;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE;YAC5C,IAAI,CAAC,EAAE;iBACJ,gBAAgB,CAAC,eAAe,CAAC;iBACjC,OAAO,CAAC,CAAC,SAAS,KACjB,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CACvD,CAAC;SACL;aAAM,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACxC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;kBACvD,MAAM;kBACN,MAAM,CAAC;SACZ;KACF;IAED,oBAAoB;QAClB,uBAAuB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KACxD;;;;IAMD,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK,EAAE,CAAC;KAC1B;IAaD,MAAM;QACJ,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,QAAQ,EACR,oBAAoB,EACpB,WAAW,EACX,EAAE,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,SAAS,EACT,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,GAAG,IAAI,CAAC;QAET,MAAM,EAAE,GAAG,eAAe,KAAK,IAAI,UAAU,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEnE,MAAM,wBAAwB,GAAG,sBAAsB,KAAK,SAAS,CAAC;QAEtE,OAAO;cACH,iBAAiB,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC;cAC5C,iBAAiB,CAAC,EAAE,CAAC,CAAC;QAE1B,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,sBAAsB,EAAE,QAAQ;gBAChC,CAAC,eAAe,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI;gBAC/B,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAED,4DAAK,KAAK,EAAC,WAAW,IACnB,oBAAoB,IACnB,WAAK,KAAK,EAAC,sBAAsB,GAAG,KAEpC,OAAO,KACL,WACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,eACxB,SAAS,eACT,SAAS,IAEnB,kCAA6B,EAC7B,YAAM,CAAC,EAAC,qFAAqF,GAAG,CAC5F,CACP,CACF,EACD,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,OAAO;gBACP,aAAa,EAAE,oBAAoB;aACpC,EACD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACnC,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,oBAAoB,EACnC,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,IAAI,gBACE,SAAS,GAAG,KAAK,GAAG,SAAS,GAClC,EACR,CAAC,SAAS,KACT,sEAAe,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAC,MAAM,IAClD,8DAAO,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS,CACrB,CACjB,CACG,EACL,UAAU,CAAC,EAAE,EAAE,kBAAkB,CAAC,KACjC,4DACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC,IAEhD,wBAAwB,IAAI,4DAAK,KAAK,EAAC,eAAe,GAAO,EAC9D,4DAAK,KAAK,EAAC,yBAAyB,IACjC,wBAAwB,KACvB,sEAAe,OAAO,EAAC,SAAS,IAC9B,0DAAG,KAAK,EAAC,cAAc,eAAW,QAAQ,IACvC,WAAW,CACV,CACU,CACjB,EACD,4DACE,KAAK,EAAE;gBACL,0BAA0B,EAAE,CAAC,wBAAwB;aACtD,IAED,6DAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-checkbox-disabled) {\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.ic-data-table-checkbox) .container {\n padding: 0;\n margin-bottom: 0;\n}\n\n:host(.ic-checkbox-small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-checkbox-background-unselected);\n border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host .container svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.ic-checkbox-small) .checkbox,\n:host(.ic-checkbox-small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-checkbox-large) .checkbox,\n:host(.ic-checkbox-large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-checkbox-background-selected);\n border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-checkbox-background-selected-disabled);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-background-selected-disabled);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: var(--ic-checkbox-background-indeterminate);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate);\n}\n\n.checkbox:indeterminate:disabled,\n.checkbox.indeterminate:checked:disabled {\n background-color: var(--ic-checkbox-background-indeterminate-disabled);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-checkbox-background-selected-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-checkbox-background-indeterminate-hover);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-checkbox-background-selected-pressed);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-checkbox-background-indeterminate-pressed);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);\n}\n\n.checkbox:hover {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-hover);\n}\n\n.checkbox:active {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-pressed);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-border-width) dashed\n var(--ic-checkbox-border-unselected-disabled);\n}\n\n.checkbox-label {\n color: var(--ic-checkbox-text);\n\n --ic-typography-color: var(--ic-checkbox-text);\n}\n\n.checkbox-label > label {\n padding-left: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-disabled) .checkbox-label {\n color: var(--ic-checkbox-text-disabled);\n\n --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: var(--ic-checkbox-icon-pressed);\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-checkbox-large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-checkbox-icon-indeterminate);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.ic-checkbox-large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-checkbox-required-bar);\n border-left: 0.125rem solid var(--ic-checkbox-required-bar);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-checkbox-required-text);\n\n --ic-typography-color: var(--ic-checkbox-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n.dynamic-field-container {\n flex: 100%;\n}\n\n@media (max-width: 576px) {\n ::slotted() {\n --input-width: 100%;\n }\n\n .dynamic-field-container {\n flex: initial;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n\n/ Right to left /\n.checkmark:dir(rtl) {\n right: 0;\n}\n\n.checkbox-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n.indeterminate-symbol:dir(rtl) {\n right: 0.288rem;\n}\n\n.branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n/\n @slot additional-field - Content to be displayed alongside a checkbox.\n /\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer?: HTMLDivElement;\n private checkboxEl?: HTMLInputElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /\n If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n /\n @Prop({ reflect: true, mutable: true }) checked = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The text to be displayed when dynamic.\n /\n\n @Prop() dynamicText = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the checkbox with.\n /\n @Prop() form?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop({ mutable: true }) groupLabel?: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel = false;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate = false;\n @State() displayIndeterminate = this.indeterminate;\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate =\n this.indeterminate && (this.nativeIndeterminateBehaviour \|\| this.checked);\n }\n\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop({ mutable: true }) name?: string;\n\n /\n If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n /\n @Prop() nativeIndeterminateBehaviour = false;\n\n /\n The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n /\n @Prop({ mutable: true }) size?: IcSizes;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n The value for the checkbox.\n /\n @Prop() value = \"\";\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const { parentElement } = this.el;\n if (parentElement?.tagName === \"IC-CHECKBOX-GROUP\") {\n const { name, label, size } = parentElement as HTMLIcCheckboxGroupElement;\n\n if (!this.name) this.name = name;\n if (!this.size) this.size = size;\n this.groupLabel = label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n this.el\n .querySelectorAll(\"ic-text-field\")\n .forEach((textfield) =>\n textfield.setAttribute(\"disabled\", `${!this.checked}`)\n );\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.checkboxEl?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate =\n !this.nativeIndeterminateBehaviour && this.indeterminate && this.checked;\n this.icCheck.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n displayIndeterminate,\n dynamicText,\n el,\n form,\n groupLabel,\n handleClick,\n hideLabel,\n label,\n name,\n size,\n theme,\n value,\n } = this;\n\n const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, \"-\");\n\n const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n checked\n ? renderHiddenInput(el, value, name, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": disabled,\n [`ic-checkbox-${size}`]: !!size,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate ? (\n <div class=\"indeterminate-symbol\" />\n ) : (\n checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <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\" />\n </svg>\n )\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n ref={(el) => (this.checkboxEl = el)}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={handleClick}\n form={form}\n aria-label={hideLabel ? label : undefined}\n ></input>\n {!hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {isDynamicAdditionalField && <div class=\"branch-corner\"></div>}\n <div class=\"dynamic-field-container\">\n {isDynamicAdditionalField && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\": !isDynamicAdditionalField,\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-checkbox.js","mappings":"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","names":[],"sources":["src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-checkbox-disabled) {\n pointer-events: none;\n}\n\n.container {\n display: flex;\n width: fit-content;\n padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xxs);\n align-items: center;\n}\n\n:host(.ic-data-table-checkbox) .container {\n padding: 0;\n margin-bottom: 0;\n}\n\n:host(.ic-checkbox-small) .container {\n margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-checkbox-background-unselected);\n border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);\n border-radius: var(--ic-border-radius);\n outline: none;\n cursor: pointer;\n transition: var(--ic-easing-transition-fast);\n flex-shrink: 0;\n}\n\n:host .container svg {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host(.ic-checkbox-small) .checkbox,\n:host(.ic-checkbox-small) .container svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n:host(.ic-checkbox-large) .checkbox,\n:host(.ic-checkbox-large) .container svg {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.checkbox:checked {\n background-color: var(--ic-checkbox-background-selected);\n border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);\n transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n background-color: var(--ic-checkbox-background-selected-disabled);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-background-selected-disabled);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n background-color: var(--ic-checkbox-background-indeterminate);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate);\n}\n\n.checkbox:indeterminate:disabled,\n.checkbox.indeterminate:checked:disabled {\n background-color: var(--ic-checkbox-background-indeterminate-disabled);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);\n}\n\n.checkbox:checked:hover {\n background-color: var(--ic-checkbox-background-selected-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n background-color: var(--ic-checkbox-background-indeterminate-hover);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);\n}\n\n.checkbox:checked:active {\n background-color: var(--ic-checkbox-background-selected-pressed);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n background-color: var(--ic-checkbox-background-indeterminate-pressed);\n border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);\n}\n\n.checkbox:hover {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-hover);\n}\n\n.checkbox:active {\n box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);\n border: var(--ic-border-width) solid\n var(--ic-checkbox-border-unselected-pressed);\n}\n\n.checkbox:focus {\n box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n border: var(--ic-border-width) dashed\n var(--ic-checkbox-border-unselected-disabled);\n}\n\n.checkbox-label {\n color: var(--ic-checkbox-text);\n\n --ic-typography-color: var(--ic-checkbox-text);\n}\n\n.checkbox-label > label {\n padding-left: var(--ic-space-sm);\n display: inline-block;\n}\n\n:host(.ic-checkbox-disabled) .checkbox-label {\n color: var(--ic-checkbox-text-disabled);\n\n --ic-typography-color: var(--ic-checkbox-text-disabled);\n}\n\n.checkbox-label:hover {\n cursor: pointer;\n}\n\n.checkmark {\n position: relative;\n right: calc(-1 * var(--ic-space-lg));\n margin-left: calc(-1 * var(--ic-space-lg));\n fill: var(--ic-checkbox-icon-pressed);\n z-index: 1;\n background-color: transparent;\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .checkmark {\n margin-left: calc(-1 * var(--ic-space-md));\n right: calc(-1 * var(--ic-space-md));\n}\n\n:host(.ic-checkbox-large) .checkmark {\n margin-left: calc(-1 * var(--ic-space-xl));\n right: calc(-1 * var(--ic-space-xl));\n}\n\n.indeterminate-symbol {\n position: relative;\n width: 0.875rem;\n height: var(--ic-space-xxxs);\n right: -1.188rem;\n margin-left: -0.875rem;\n z-index: 1;\n background-color: var(--ic-checkbox-icon-indeterminate);\n pointer-events: none;\n flex-shrink: 0;\n}\n\n:host(.ic-checkbox-small) .indeterminate-symbol {\n width: 0.6rem;\n right: -0.8rem;\n margin-left: -0.6rem;\n}\n\n:host(.ic-checkbox-large) .indeterminate-symbol {\n width: 1.25rem;\n right: -1.625rem;\n margin-left: -1.25rem;\n}\n\n.additional-field-wrapper {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-checkbox-required-bar);\n border-left: 0.125rem solid var(--ic-checkbox-required-bar);\n}\n\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n color: var(--ic-checkbox-required-text);\n\n --ic-typography-color: var(--ic-checkbox-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n.dynamic-field-container {\n flex: 100%;\n}\n\n@media (max-width: 576px) {\n ::slotted() {\n --input-width: 100%;\n }\n\n .dynamic-field-container {\n flex: initial;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n .checkbox {\n appearance: revert;\n transition: none;\n }\n\n .checkbox:checked {\n transition: none;\n }\n\n .checkbox:focus-visible {\n outline: 0.125rem solid highlight;\n }\n\n .checkbox:disabled:not(:checked) {\n appearance: none;\n border-color: GrayText;\n }\n\n .checkmark {\n fill: none;\n }\n\n .indeterminate-symbol {\n display: none;\n }\n}\n\n/ Right to left /\n.checkmark:dir(rtl) {\n right: 0;\n}\n\n.checkbox-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n.indeterminate-symbol:dir(rtl) {\n right: 0.288rem;\n}\n\n.branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n.dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcSizes,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n removeHiddenInput,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n} from \"../../utils/helpers\";\n\n/\n @slot additional-field - Content to be displayed alongside a checkbox.\n /\n@Component({\n tag: \"ic-checkbox\",\n styleUrl: \"ic-checkbox.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n private additionalFieldContainer?: HTMLDivElement;\n private checkboxEl?: HTMLInputElement;\n\n @Element() el: HTMLIcCheckboxElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n /\n If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n /\n @Prop({ reflect: true, mutable: true }) checked = false;\n @State() initiallyChecked = this.checked;\n\n /\n If `true`, the checkbox will be set to the disabled state.\n /\n @Prop() disabled = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The text to be displayed when dynamic.\n /\n\n @Prop() dynamicText = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the checkbox with.\n /\n @Prop() form?: string;\n\n /\n The group label for the checkbox.\n /\n @Prop({ mutable: true }) groupLabel?: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel = false;\n\n /\n If `true`, the indeterminate state will be displayed when checked.\n /\n @Prop() indeterminate = false;\n @State() displayIndeterminate = this.indeterminate;\n @Watch(\"indeterminate\")\n watchIndeterminateHandler(): void {\n this.displayIndeterminate =\n this.indeterminate && (this.nativeIndeterminateBehaviour \|\| this.checked);\n }\n\n /\n The label for the checkbox.\n /\n @Prop() label!: string;\n\n /\n The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n /\n @Prop({ mutable: true }) name?: string;\n\n /\n If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n /\n @Prop() nativeIndeterminateBehaviour = false;\n\n /\n The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n /\n @Prop({ mutable: true }) size?: IcSizes;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme: IcThemeMode = \"inherit\";\n\n /\n The value for the checkbox.\n /\n @Prop() value = \"\";\n\n /\n Emitted when a checkbox has been checked.\n /\n @Event() icCheck: EventEmitter<void>;\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n addFormResetListener(this.el, this.handleFormReset);\n\n const { parentElement } = this.el;\n if (parentElement?.tagName === \"IC-CHECKBOX-GROUP\") {\n const { name, label, size } = parentElement as HTMLIcCheckboxGroupElement;\n\n if (!this.name) this.name = name;\n if (!this.size) this.size = size;\n this.groupLabel = label;\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Checkbox\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n this.el\n .querySelectorAll(\"ic-text-field\")\n .forEach((textfield) =>\n textfield.setAttribute(\"disabled\", `${!this.checked}`)\n );\n } else if (this.additionalFieldContainer) {\n this.additionalFieldContainer.style.display = !this.checked\n ? \"none\"\n : \"flex\";\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n /\n Sets focus on the checkbox.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.checkboxEl?.focus();\n }\n\n private handleClick = () => {\n this.checked = !this.checked;\n this.displayIndeterminate =\n !this.nativeIndeterminateBehaviour && this.indeterminate && this.checked;\n this.icCheck.emit();\n };\n\n private handleFormReset = (): void => {\n this.checked = this.initiallyChecked;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n checked,\n disabled,\n displayIndeterminate,\n dynamicText,\n el,\n form,\n groupLabel,\n handleClick,\n hideLabel,\n label,\n name,\n size,\n theme,\n value,\n } = this;\n\n const id = `ic-checkbox-${label}-${groupLabel}`.replace(/ /g, \"-\");\n\n const isDynamicAdditionalField = additionalFieldDisplay === \"dynamic\";\n\n checked\n ? renderHiddenInput(el, value, name, disabled)\n : removeHiddenInput(el);\n\n return (\n <Host\n class={{\n \"ic-checkbox-disabled\": disabled,\n [`ic-checkbox-${size}`]: !!size,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <div class=\"container\">\n {displayIndeterminate ? (\n <div class=\"indeterminate-symbol\" />\n ) : (\n checked && (\n <svg\n class=\"checkmark\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n >\n <title>checkmark icon</title>\n <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\" />\n </svg>\n )\n )}\n <input\n role=\"checkbox\"\n class={{\n checkbox: true,\n checked,\n indeterminate: displayIndeterminate,\n }}\n ref={(el) => (this.checkboxEl = el)}\n type=\"checkbox\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={checked}\n indeterminate={displayIndeterminate}\n onClick={handleClick}\n form={form}\n aria-label={hideLabel ? label : undefined}\n ></input>\n {!hideLabel && (\n <ic-typography class=\"checkbox-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n )}\n </div>\n {isSlotUsed(el, \"additional-field\") && (\n <div\n class=\"dynamic-container\"\n ref={(el) => (this.additionalFieldContainer = el)}\n >\n {isDynamicAdditionalField && <div class=\"branch-corner\"></div>}\n <div class=\"dynamic-field-container\">\n {isDynamicAdditionalField && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\" aria-live=\"polite\">\n {dynamicText}\n </p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\": !isDynamicAdditionalField,\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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, f as renderDynamicChildSlots, i as isSlotUsed, a as isElInAGGrid } from './helpers.js';
+import { k as convertToRGBA, l 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';
@@ -8,7 +8,7 @@ const dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.o
 </svg>
 `;
-const icChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;max-width:100%;vertical-align:middle}.chip{--chip-bg-color:transparent;--chip-hover-bg:var(--ic-chip-action-hover);--chip-pressed-bg:var(--ic-chip-action-pressed);display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;position:relative;background-color:var(--chip-bg-color);border:var(--ic-border-width) solid transparent;justify-content:space-between}@media (prefers-reduced-motion: no-preference){.chip{transition:var(--ic-easing-transition-fast)}}.chip.small{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}ic-tooltip:focus-within{z-index:1}.filled{--chip-bg-color:var(\n    --chip-custom-color,\n    var(--ic-chip-background-filled-default)\n  );--ic-typography-color:var(\n    --chip-custom-foreground-color,\n    var(--ic-chip-label)\n  );color:var(--chip-custom-foreground-color, var(--ic-chip-label))}.filled.disabled{--chip-bg-color:var(--ic-chip-background-filled-inactive)}:host(.ic-chip-dark-text){--chip-custom-foreground-color:var(--ic-architectural-black)}:host(.ic-chip-light-text){--chip-custom-foreground-color:var(--ic-architectural-white)}:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-dark-bg-hover)}:host(.ic-chip-dark-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-dark-bg-pressed)}:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-light-bg-hover)}:host(.ic-chip-light-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-light-bg-pressed)}.outlined{color:var(--ic-chip-outline-label);border-color:var(--chip-custom-color, var(--ic-chip-outline));padding:calc(var(--ic-space-xxs));--ic-typography-color:var(--ic-chip-outline-label)}.outlined.disabled{border:var(--ic-border-disabled);border-color:var(--ic-chip-outline-inactive)}.chip.disabled ic-typography{--ic-typography-color:var(--ic-chip-label-inactive)}.dismiss-icon{border:none;border-radius:50%;padding:0;color:currentcolor;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-chip-icon-inactive)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-chip-icon-inactive)}.outlined.non-transparent{background-color:var(--ic-chip-outline-background)}:host .chip.hovered:not(:focus-within){background-image:linear-gradient(var(--chip-hover-bg) 0 0)}:host .chip:focus-within{background-image:linear-gradient(var(--chip-pressed-bg) 0 0)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@media (forced-colors: active){.chip{border:var(--ic-border-hc)}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{--ic-typography-color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
+const icChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;max-width:100%;vertical-align:middle}.chip{--chip-bg-color:transparent;--chip-hover-bg:var(--ic-chip-action-hover);--chip-pressed-bg:var(--ic-chip-action-pressed);display:flex;padding:calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;position:relative;background-color:var(--chip-bg-color);border:var(--ic-border-width) solid transparent;justify-content:space-between}@media (prefers-reduced-motion: no-preference){.chip{transition:var(--ic-easing-transition-fast)}}.chip.small{padding:var(--ic-space-1px) var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}ic-tooltip:focus-within{z-index:1}.filled{--chip-bg-color:var(\n    --chip-custom-color,\n    var(--ic-chip-background-filled-default)\n  );--ic-typography-color:var(\n    --chip-custom-foreground-color,\n    var(--ic-chip-label)\n  );color:var(--chip-custom-foreground-color, var(--ic-chip-label))}.filled.disabled{--chip-bg-color:var(--ic-chip-background-filled-inactive)}:host(.ic-chip-dark-text){--chip-custom-foreground-color:var(--ic-architectural-black)}:host(.ic-chip-light-text){--chip-custom-foreground-color:var(--ic-architectural-white)}:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-dark-bg-hover)}:host(.ic-chip-dark-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-dark-bg-pressed)}:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-light-bg-hover)}:host(.ic-chip-light-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-light-bg-pressed)}.outlined{color:var(--ic-chip-outline-label);border-color:var(--chip-custom-color, var(--ic-chip-outline));padding:calc(var(--ic-space-xxs));--ic-typography-color:var(--ic-chip-outline-label)}.outlined.disabled{border:var(--ic-border-disabled);border-color:var(--ic-chip-outline-inactive)}.chip.disabled ic-typography{--ic-typography-color:var(--ic-chip-label-inactive)}.dismiss-icon{border:none;border-radius:50%;padding:0;color:currentcolor;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-chip-icon-inactive)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-chip-icon-inactive)}.outlined.non-transparent{background-color:var(--ic-chip-outline-background)}:host .chip.hovered:not(:focus-within){background-image:linear-gradient(var(--chip-hover-bg) 0 0)}:host .chip:focus-within{background-image:linear-gradient(var(--chip-pressed-bg) 0 0)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@media (forced-colors: active){.chip{border:var(--ic-border-hc)}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{--ic-typography-color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
 const IcChipStyle0 = icChipCss;
 const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {