@ukic/web-components 3.20.0 → 3.22.0

package/dist/esm/ic-action-chip.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
 import { O as OpenInNew } from './OpenInNew-cdeed5ce.js';
-import { r as removeDisabledFalse, o as onComponentRequiredPropUndefined, a as renderDynamicChildSlots, i as isSlotUsed, b as isElInAGGrid } from './helpers-0f85537f.js';
+import { r as removeDisabledFalse, o as onComponentRequiredPropUndefined, a as renderDynamicChildSlots, i as isSlotUsed, b as isElInAGGrid } from './helpers-66681c73.js';
 import './constants-ab12fdcf.js';
 
-const icActionChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n}\n\n.chip {\n  --icon-color: var(--ic-action-chip-filled-icon);\n  --text-color: var(--ic-action-chip-filled-label);\n  --ic-typography-color: var(--text-color);\n\n  align-items: center;\n  background-color: var(--ic-action-chip-filled-background-default);\n  border: var(--ic-border-width) solid transparent;\n  border-radius: var(--ic-space-md);\n  color: var(--text-color);\n  cursor: pointer;\n  display: flex;\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);\n  position: relative;\n  text-decoration: none;\n\n  &:hover {\n    background-color: var(--ic-action-chip-filled-background-hover);\n  }\n\n  &:active {\n    background-color: var(--ic-action-chip-filled-background-pressed);\n  }\n\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n    outline: var(--ic-hc-focus-outline);\n    z-index: 1;\n  }\n}\n\n.small {\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n  padding: var(--ic-space-1px) var(--ic-space-xxxs);\n}\n\n.large {\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.outlined {\n  --icon-color: var(--ic-action-chip-outlined-icon);\n  --text-color: var(--ic-action-chip-outlined-label);\n\n  background-color: transparent;\n  border-color: var(--ic-action-chip-outlined-border-default);\n\n  &.non-transparent {\n    background-color: var(--ic-action-chip-outlined-background-default);\n  }\n\n  &:hover {\n    --icon-color: var(--ic-action-chip-outlined-icon-hover);\n    --text-color: var(--ic-action-chip-outlined-label-hover);\n\n    background-color: var(--ic-action-chip-outlined-background-hover);\n    border-color: var(--ic-action-chip-outlined-border-hover);\n  }\n\n  &:active {\n    --icon-color: var(--ic-action-chip-outlined-icon-pressed);\n    --text-color: var(--ic-action-chip-outlined-label-pressed);\n\n    background-color: var(--ic-action-chip-outlined-background-pressed);\n    border-color: var(--ic-action-chip-outlined-border-pressed);\n  }\n}\n\n.monochrome {\n  &.filled {\n    background-color: var(\n      --ic-action-chip-monochrome-filled-background-default\n    );\n\n    &:hover {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-hover\n      );\n    }\n\n    &:active {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-pressed\n      );\n    }\n  }\n\n  &.outlined {\n    --icon-color: var(--ic-action-chip-monochrome-outlined-icon);\n    --text-color: var(--ic-action-chip-monochrome-outlined-label);\n\n    border-color: var(--ic-action-chip-monochrome-outlined-border-default);\n\n    &.non-transparent {\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-default\n      );\n    }\n\n    &:hover {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-hover);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-hover);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-hover\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-hover);\n    }\n\n    &:active {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-pressed);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-pressed);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-pressed\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-pressed);\n    }\n  }\n}\n\n.disabled {\n  --icon-color: var(--ic-action-chip-icon-disabled) !important;\n  --text-color: var(--ic-action-chip-label-disabled) !important;\n\n  background-color: var(--ic-action-chip-background-disabled) !important;\n  cursor: default;\n\n  &.outlined {\n    border-color: var(--ic-action-chip-outlined-border-disabled) !important;\n    border-style: dashed;\n\n    &:not(.non-transparent) {\n      background-color: transparent !important;\n    }\n  }\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.icon {\n  box-sizing: border-box;\n  color: var(--icon-color);\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxxs);\n}\n\n.open-in-new-icon {\n  box-sizing: border-box;\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n.open-in-new-icon > svg {\n  fill: var(--icon-color);\n  height: inherit;\n  width: inherit;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .chip {\n    transition: var(--ic-easing-transition-fast);\n  }\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-border-hc);\n\n    &.disabled {\n      --text-color: GrayText;\n\n      -webkit-appearance: none;\n\n         -moz-appearance: none;\n\n              appearance: none;\n      border-color: GrayText;\n\n      svg,\n      ::slotted(svg) {\n        fill: GrayText;\n      }\n    }\n\n    &:focus {\n      border-color: Highlight;\n      outline: none;\n    }\n  }\n}\n";
+const icActionChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n}\n\n.chip {\n  --icon-color: var(--ic-action-chip-filled-icon);\n  --text-color: var(--ic-action-chip-filled-label);\n  --ic-typography-color: var(--text-color);\n\n  align-items: center;\n  background-color: var(--ic-action-chip-filled-background-default);\n  border: var(--ic-border-width) solid transparent;\n  border-radius: var(--ic-space-md);\n  color: var(--text-color);\n  cursor: pointer;\n  display: flex;\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);\n  position: relative;\n  text-decoration: none;\n\n  &:hover {\n    background-color: var(--ic-action-chip-filled-background-hover);\n  }\n\n  &:active {\n    background-color: var(--ic-action-chip-filled-background-pressed);\n  }\n\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n    outline: var(--ic-hc-focus-outline);\n    z-index: 1;\n  }\n}\n\n.small {\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n  padding: var(--ic-space-1px) var(--ic-space-xs);\n}\n\n.medium {\n  border-radius: var(--ic-space-md);\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.large {\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.outlined {\n  --icon-color: var(--ic-action-chip-outlined-icon);\n  --text-color: var(--ic-action-chip-outlined-label);\n\n  background-color: transparent;\n  border-color: var(--ic-action-chip-outlined-border-default);\n\n  &.non-transparent {\n    background-color: var(--ic-action-chip-outlined-background-default);\n  }\n\n  &:hover {\n    --icon-color: var(--ic-action-chip-outlined-icon-hover);\n    --text-color: var(--ic-action-chip-outlined-label-hover);\n\n    background-color: var(--ic-action-chip-outlined-background-hover);\n    border-color: var(--ic-action-chip-outlined-border-hover);\n  }\n\n  &:active {\n    --icon-color: var(--ic-action-chip-outlined-icon-pressed);\n    --text-color: var(--ic-action-chip-outlined-label-pressed);\n\n    background-color: var(--ic-action-chip-outlined-background-pressed);\n    border-color: var(--ic-action-chip-outlined-border-pressed);\n  }\n}\n\n.monochrome {\n  &.filled {\n    background-color: var(\n      --ic-action-chip-monochrome-filled-background-default\n    );\n\n    &:hover {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-hover\n      );\n    }\n\n    &:active {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-pressed\n      );\n    }\n  }\n\n  &.outlined {\n    --icon-color: var(--ic-action-chip-monochrome-outlined-icon);\n    --text-color: var(--ic-action-chip-monochrome-outlined-label);\n\n    border-color: var(--ic-action-chip-monochrome-outlined-border-default);\n\n    &.non-transparent {\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-default\n      );\n    }\n\n    &:hover {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-hover);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-hover);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-hover\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-hover);\n    }\n\n    &:active {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-pressed);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-pressed);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-pressed\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-pressed);\n    }\n  }\n}\n\n.disabled {\n  --icon-color: var(--ic-action-chip-icon-disabled) !important;\n  --text-color: var(--ic-action-chip-label-disabled) !important;\n\n  background-color: var(--ic-action-chip-background-disabled) !important;\n  cursor: default;\n\n  &.outlined {\n    border-color: var(--ic-action-chip-outlined-border-disabled) !important;\n    border-style: dashed;\n\n    &:not(.non-transparent) {\n      background-color: transparent !important;\n    }\n  }\n}\n\n.label.small {\n  padding: 0 var(--ic-space-xxs);\n}\n\n.label.medium {\n  padding: 0 calc(var(--ic-space-xs) - var(--ic-space-xxxs));\n}\n\n.label.large {\n  padding: 0 var(--ic-space-xs);\n}\n\n.icon {\n  box-sizing: border-box;\n  color: var(--icon-color);\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxxs);\n}\n\n.open-in-new-icon {\n  box-sizing: border-box;\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n.open-in-new-icon > svg {\n  fill: var(--icon-color);\n  height: inherit;\n  width: inherit;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .chip {\n    transition: var(--ic-easing-transition-fast);\n  }\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-border-hc);\n\n    &.disabled {\n      --text-color: GrayText;\n\n      -webkit-appearance: none;\n\n         -moz-appearance: none;\n\n              appearance: none;\n      border-color: GrayText;\n\n      svg,\n      ::slotted(svg) {\n        fill: GrayText;\n      }\n    }\n\n    &:focus {\n      border-color: Highlight;\n      outline: none;\n    }\n  }\n}\n";
 const IcActionChipStyle0 = icActionChipCss;
 
 const ActionChip = class {
@@ -98,7 +98,11 @@ const ActionChip = class {
                 "non-transparent": variant === "outlined" && !transparentBackground,
                 [`${size}`]: true,
                 [`${variant}`]: true,
-            }, ref: (el) => (this.chipEl = el) }, chipAttrs), isSlotUsed(this.el, "icon") && (h("div", { key: 'cac34c4420e0b92337b4421088389e79dc2d3e78', class: "icon" }, h("slot", { key: 'fbbdfcf2089a6a31785a33ddc74c66ad433ebe4c', name: "icon" }))), h("ic-typography", { key: '867dfd5c7651cfbce4b5c3ee439fe1a3e78dbecd', variant: "label", class: { label: true, "in-ag-grid": isElInAGGrid(this.el) } }, h("span", { key: 'ce77ac12d3e9a09b409b2ff6bffd1aa09747fad9' }, label)), !isButtonElement && target === "_blank" && (h("span", { key: '994fcfd7c5be9cba20489792f4ec8a26f481e4cb', class: "open-in-new-icon", innerHTML: OpenInNew })), isSlotUsed(this.el, "badge") && h("slot", { key: '7883e63e166ee3e39d70cbe6110fd1fe6f0b63a5', name: "badge" }))));
+            }, ref: (el) => (this.chipEl = el) }, chipAttrs), isSlotUsed(this.el, "icon") && (h("div", { key: 'cac34c4420e0b92337b4421088389e79dc2d3e78', class: "icon" }, h("slot", { key: 'fbbdfcf2089a6a31785a33ddc74c66ad433ebe4c', name: "icon" }))), h("ic-typography", { key: '40643c5bb5b15a64a94913076d06ba0007bac14a', variant: "label", class: {
+                label: true,
+                [`${size}`]: true,
+                "in-ag-grid": isElInAGGrid(this.el),
+            } }, h("span", { key: '84e78294e0f906e9348d0223bd6afb92b90f4263' }, label)), !isButtonElement && target === "_blank" && (h("span", { key: '8767227d1ed7c1822fff1fe71103a26587b00d6e', class: "open-in-new-icon", innerHTML: OpenInNew })), isSlotUsed(this.el, "badge") && h("slot", { key: '8b791d90dadc0a781c88d1a68542929b73495858', name: "badge" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ic-action-chip.entry.js.map

@@ -1 +1 @@
-{"file":"ic-action-chip.entry.js","mappings":"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","names":[],"sources":["src/components/ic-action-chip/ic-action-chip.css?tag=ic-action-chip&encapsulation=shadow","src/components/ic-action-chip/ic-action-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n}\n\n.chip {\n  --icon-color: var(--ic-action-chip-filled-icon);\n  --text-color: var(--ic-action-chip-filled-label);\n  --ic-typography-color: var(--text-color);\n\n  align-items: center;\n  background-color: var(--ic-action-chip-filled-background-default);\n  border: var(--ic-border-width) solid transparent;\n  border-radius: var(--ic-space-md);\n  color: var(--text-color);\n  cursor: pointer;\n  display: flex;\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);\n  position: relative;\n  text-decoration: none;\n\n  &:hover {\n    background-color: var(--ic-action-chip-filled-background-hover);\n  }\n\n  &:active {\n    background-color: var(--ic-action-chip-filled-background-pressed);\n  }\n\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n    outline: var(--ic-hc-focus-outline);\n    z-index: 1;\n  }\n}\n\n.small {\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n  padding: var(--ic-space-1px) var(--ic-space-xxxs);\n}\n\n.large {\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.outlined {\n  --icon-color: var(--ic-action-chip-outlined-icon);\n  --text-color: var(--ic-action-chip-outlined-label);\n\n  background-color: transparent;\n  border-color: var(--ic-action-chip-outlined-border-default);\n\n  &.non-transparent {\n    background-color: var(--ic-action-chip-outlined-background-default);\n  }\n\n  &:hover {\n    --icon-color: var(--ic-action-chip-outlined-icon-hover);\n    --text-color: var(--ic-action-chip-outlined-label-hover);\n\n    background-color: var(--ic-action-chip-outlined-background-hover);\n    border-color: var(--ic-action-chip-outlined-border-hover);\n  }\n\n  &:active {\n    --icon-color: var(--ic-action-chip-outlined-icon-pressed);\n    --text-color: var(--ic-action-chip-outlined-label-pressed);\n\n    background-color: var(--ic-action-chip-outlined-background-pressed);\n    border-color: var(--ic-action-chip-outlined-border-pressed);\n  }\n}\n\n.monochrome {\n  &.filled {\n    background-color: var(\n      --ic-action-chip-monochrome-filled-background-default\n    );\n\n    &:hover {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-hover\n      );\n    }\n\n    &:active {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-pressed\n      );\n    }\n  }\n\n  &.outlined {\n    --icon-color: var(--ic-action-chip-monochrome-outlined-icon);\n    --text-color: var(--ic-action-chip-monochrome-outlined-label);\n\n    border-color: var(--ic-action-chip-monochrome-outlined-border-default);\n\n    &.non-transparent {\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-default\n      );\n    }\n\n    &:hover {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-hover);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-hover);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-hover\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-hover);\n    }\n\n    &:active {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-pressed);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-pressed);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-pressed\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-pressed);\n    }\n  }\n}\n\n.disabled {\n  --icon-color: var(--ic-action-chip-icon-disabled) !important;\n  --text-color: var(--ic-action-chip-label-disabled) !important;\n\n  background-color: var(--ic-action-chip-background-disabled) !important;\n  cursor: default;\n\n  &.outlined {\n    border-color: var(--ic-action-chip-outlined-border-disabled) !important;\n    border-style: dashed;\n\n    &:not(.non-transparent) {\n      background-color: transparent !important;\n    }\n  }\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.icon {\n  box-sizing: border-box;\n  color: var(--icon-color);\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxxs);\n}\n\n.open-in-new-icon {\n  box-sizing: border-box;\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n.open-in-new-icon > svg {\n  fill: var(--icon-color);\n  height: inherit;\n  width: inherit;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .chip {\n    transition: var(--ic-easing-transition-fast);\n  }\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-border-hc);\n\n    &.disabled {\n      --text-color: GrayText;\n\n      appearance: none;\n      border-color: GrayText;\n\n      svg,\n      ::slotted(svg) {\n        fill: GrayText;\n      }\n    }\n\n    &:focus {\n      border-color: Highlight;\n      outline: none;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport {\n  isElInAGGrid,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcEmphasisType, IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { IcButtonTypes } from \"../ic-button/ic-button.types\";\n\n/**\n * @slot badge - Badge component overlaying the top right of the chip.\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-action-chip\",\n  styleUrl: \"ic-action-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ActionChip {\n  private chipEl?: HTMLButtonElement | HTMLAnchorElement;\n  private hostMutationObserver?: MutationObserver;\n\n  @Element() el: HTMLIcActionChipElement;\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download: string | boolean = false;\n\n  /**\n   * The <form> element to associate the chip with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the chip. It overrides the action attribute of the chip'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 chip's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * The URL that the link points to. This will render the chip 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   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n   */\n  @Prop() monochrome = 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 size of the chip.\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 chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n   */\n  @Prop() transparentBackground = true;\n\n  /**\n   * The type of the chip.\n   */\n  @Prop() type: IcButtonTypes = \"button\";\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant: IcEmphasisType = \"filled\";\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.chipEl?.focus();\n  }\n\n  render() {\n    const {\n      disabled,\n      download,\n      form,\n      formaction,\n      formenctype,\n      formmethod,\n      formnovalidate,\n      formtarget,\n      href,\n      hreflang,\n      label,\n      monochrome,\n      referrerpolicy,\n      rel,\n      size,\n      target,\n      theme,\n      transparentBackground,\n      type,\n      variant,\n    } = this;\n\n    const TagType = href ? \"a\" : \"button\";\n    const isButtonElement = TagType === \"button\";\n\n    const chipAttrs = isButtonElement\n      ? {\n          disabled,\n          form,\n          formaction,\n          formenctype,\n          formmethod,\n          formnovalidate,\n          formtarget,\n          type,\n        }\n      : {\n          download: download !== false ? download : null,\n          href,\n          hreflang,\n          referrerpolicy,\n          rel,\n          target,\n        };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <TagType\n          class={{\n            chip: true,\n            disabled: isButtonElement && disabled,\n            monochrome,\n            \"non-transparent\": variant === \"outlined\" && !transparentBackground,\n            [`${size}`]: true,\n            [`${variant}`]: true,\n          }}\n          ref={(el) => (this.chipEl = el)}\n          {...chipAttrs}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            class={{ label: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {!isButtonElement && target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </TagType>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-action-chip.entry.js","mappings":"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","names":[],"sources":["src/components/ic-action-chip/ic-action-chip.css?tag=ic-action-chip&encapsulation=shadow","src/components/ic-action-chip/ic-action-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n}\n\n.chip {\n  --icon-color: var(--ic-action-chip-filled-icon);\n  --text-color: var(--ic-action-chip-filled-label);\n  --ic-typography-color: var(--text-color);\n\n  align-items: center;\n  background-color: var(--ic-action-chip-filled-background-default);\n  border: var(--ic-border-width) solid transparent;\n  border-radius: var(--ic-space-md);\n  color: var(--text-color);\n  cursor: pointer;\n  display: flex;\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);\n  position: relative;\n  text-decoration: none;\n\n  &:hover {\n    background-color: var(--ic-action-chip-filled-background-hover);\n  }\n\n  &:active {\n    background-color: var(--ic-action-chip-filled-background-pressed);\n  }\n\n  &:focus {\n    box-shadow: var(--ic-border-focus);\n    outline: var(--ic-hc-focus-outline);\n    z-index: 1;\n  }\n}\n\n.small {\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n  padding: var(--ic-space-1px) var(--ic-space-xs);\n}\n\n.medium {\n  border-radius: var(--ic-space-md);\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.large {\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);\n}\n\n.outlined {\n  --icon-color: var(--ic-action-chip-outlined-icon);\n  --text-color: var(--ic-action-chip-outlined-label);\n\n  background-color: transparent;\n  border-color: var(--ic-action-chip-outlined-border-default);\n\n  &.non-transparent {\n    background-color: var(--ic-action-chip-outlined-background-default);\n  }\n\n  &:hover {\n    --icon-color: var(--ic-action-chip-outlined-icon-hover);\n    --text-color: var(--ic-action-chip-outlined-label-hover);\n\n    background-color: var(--ic-action-chip-outlined-background-hover);\n    border-color: var(--ic-action-chip-outlined-border-hover);\n  }\n\n  &:active {\n    --icon-color: var(--ic-action-chip-outlined-icon-pressed);\n    --text-color: var(--ic-action-chip-outlined-label-pressed);\n\n    background-color: var(--ic-action-chip-outlined-background-pressed);\n    border-color: var(--ic-action-chip-outlined-border-pressed);\n  }\n}\n\n.monochrome {\n  &.filled {\n    background-color: var(\n      --ic-action-chip-monochrome-filled-background-default\n    );\n\n    &:hover {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-hover\n      );\n    }\n\n    &:active {\n      background-color: var(\n        --ic-action-chip-monochrome-filled-background-pressed\n      );\n    }\n  }\n\n  &.outlined {\n    --icon-color: var(--ic-action-chip-monochrome-outlined-icon);\n    --text-color: var(--ic-action-chip-monochrome-outlined-label);\n\n    border-color: var(--ic-action-chip-monochrome-outlined-border-default);\n\n    &.non-transparent {\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-default\n      );\n    }\n\n    &:hover {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-hover);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-hover);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-hover\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-hover);\n    }\n\n    &:active {\n      --icon-color: var(--ic-action-chip-monochrome-outlined-icon-pressed);\n      --text-color: var(--ic-action-chip-monochrome-outlined-label-pressed);\n\n      background-color: var(\n        --ic-action-chip-monochrome-outlined-background-pressed\n      );\n      border-color: var(--ic-action-chip-monochrome-outlined-border-pressed);\n    }\n  }\n}\n\n.disabled {\n  --icon-color: var(--ic-action-chip-icon-disabled) !important;\n  --text-color: var(--ic-action-chip-label-disabled) !important;\n\n  background-color: var(--ic-action-chip-background-disabled) !important;\n  cursor: default;\n\n  &.outlined {\n    border-color: var(--ic-action-chip-outlined-border-disabled) !important;\n    border-style: dashed;\n\n    &:not(.non-transparent) {\n      background-color: transparent !important;\n    }\n  }\n}\n\n.label.small {\n  padding: 0 var(--ic-space-xxs);\n}\n\n.label.medium {\n  padding: 0 calc(var(--ic-space-xs) - var(--ic-space-xxxs));\n}\n\n.label.large {\n  padding: 0 var(--ic-space-xs);\n}\n\n.icon {\n  box-sizing: border-box;\n  color: var(--icon-color);\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  padding: var(--ic-space-xxxs);\n}\n\n.open-in-new-icon {\n  box-sizing: border-box;\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n.open-in-new-icon > svg {\n  fill: var(--icon-color);\n  height: inherit;\n  width: inherit;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .chip {\n    transition: var(--ic-easing-transition-fast);\n  }\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-border-hc);\n\n    &.disabled {\n      --text-color: GrayText;\n\n      appearance: none;\n      border-color: GrayText;\n\n      svg,\n      ::slotted(svg) {\n        fill: GrayText;\n      }\n    }\n\n    &:focus {\n      border-color: Highlight;\n      outline: none;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport {\n  isElInAGGrid,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcEmphasisType, IcSizes, IcThemeMode } from \"../../utils/types\";\nimport { IcButtonTypes } from \"../ic-button/ic-button.types\";\n\n/**\n * @slot badge - Badge component overlaying the top right of the chip.\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-action-chip\",\n  styleUrl: \"ic-action-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ActionChip {\n  private chipEl?: HTMLButtonElement | HTMLAnchorElement;\n  private hostMutationObserver?: MutationObserver;\n\n  @Element() el: HTMLIcActionChipElement;\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download: string | boolean = false;\n\n  /**\n   * The <form> element to associate the chip with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The URL that processes the information submitted by the chip. It overrides the action attribute of the chip'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 chip's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * The URL that the link points to. This will render the chip 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   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the button will display as monochromatic in either `light` or `dark` theme.\n   */\n  @Prop() monochrome = 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 size of the chip.\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 chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n   */\n  @Prop() transparentBackground = true;\n\n  /**\n   * The type of the chip.\n   */\n  @Prop() type: IcButtonTypes = \"button\";\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant: IcEmphasisType = \"filled\";\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.chipEl?.focus();\n  }\n\n  render() {\n    const {\n      disabled,\n      download,\n      form,\n      formaction,\n      formenctype,\n      formmethod,\n      formnovalidate,\n      formtarget,\n      href,\n      hreflang,\n      label,\n      monochrome,\n      referrerpolicy,\n      rel,\n      size,\n      target,\n      theme,\n      transparentBackground,\n      type,\n      variant,\n    } = this;\n\n    const TagType = href ? \"a\" : \"button\";\n    const isButtonElement = TagType === \"button\";\n\n    const chipAttrs = isButtonElement\n      ? {\n          disabled,\n          form,\n          formaction,\n          formenctype,\n          formmethod,\n          formnovalidate,\n          formtarget,\n          type,\n        }\n      : {\n          download: download !== false ? download : null,\n          href,\n          hreflang,\n          referrerpolicy,\n          rel,\n          target,\n        };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <TagType\n          class={{\n            chip: true,\n            disabled: isButtonElement && disabled,\n            monochrome,\n            \"non-transparent\": variant === \"outlined\" && !transparentBackground,\n            [`${size}`]: true,\n            [`${variant}`]: true,\n          }}\n          ref={(el) => (this.chipEl = el)}\n          {...chipAttrs}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            class={{\n              label: true,\n              [`${size}`]: true,\n              \"in-ag-grid\": isElInAGGrid(this.el),\n            }}\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {!isButtonElement && target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </TagType>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-alert.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
 import { c as closeIcon } from './close-icon-539ec8d1.js';
-import { a as renderDynamicChildSlots, i as isSlotUsed, p as pxToRem } from './helpers-0f85537f.js';
+import { a as renderDynamicChildSlots, i as isSlotUsed, p as pxToRem } from './helpers-66681c73.js';
 import { V as VARIANT_ICONS } from './constants-ab12fdcf.js';
 
 const icAlertCss = "/*! 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:block}:host ::slotted(ic-typography){--ic-typography-color:var(--ic-alert-description)}.container{min-height:var(--ic-alert-min-height);border-radius:var(--ic-space-xxs) var(--ic-space-xxxs) var(--ic-space-xxxs)\n    var(--ic-space-xxs);position:relative;display:flex;align-items:center}.container-neutral{background-color:var(--ic-alert-background-neutral);border:var(--ic-space-xxxs) solid var(--ic-alert-border-neutral)}.container-info{background-color:var(--ic-alert-background-info);border:var(--ic-space-xxxs) solid var(--ic-alert-border-info)}.container-warning{background-color:var(--ic-alert-background-warning);border:var(--ic-space-xxxs) solid var(--ic-alert-border-warning)}.container-error{background-color:var(--ic-alert-background-error);border:var(--ic-space-xxxs) solid var(--ic-alert-border-error)}.container-success{background-color:var(--ic-alert-background-success);border:var(--ic-space-xxxs) solid var(--ic-alert-border-success)}.container-ai{background-color:var(--ic-alert-background-ai);border:var(--ic-space-xxxs) solid var(--ic-alert-border-ai)}.divider{height:100%;width:var(--ic-space-xs);border-radius:var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);position:absolute}.divider-neutral{background-color:var(--ic-alert-status-type-neutral)}.divider-info{background-color:var(--ic-alert-status-type-info)}.divider-warning{background-color:var(--ic-alert-status-type-warning)}.divider-error{background-color:var(--ic-alert-status-type-error)}.divider-success{background-color:var(--ic-alert-status-type-success)}.divider-ai{background-color:var(--ic-alert-status-type-ai)}.alert-icon{align-self:flex-start;margin-top:var(--ic-space-xs);margin-right:var(--ic-space-xs)}.alert-icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}:host(.ic-alert-no-default-icon) .icon-neutral{visibility:hidden;width:0;margin-left:0.625rem}.icon-neutral>svg,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block;fill:var(--ic-alert-icon-neutral)}:host(.ic-alert-variant-info) .alert-icon svg{fill:var(--ic-alert-icon-info)}:host(.ic-alert-variant-warning) .alert-icon svg{fill:var(--ic-alert-icon-warning)}:host(.ic-alert-variant-error) .alert-icon svg{fill:var(--ic-alert-icon-error)}:host(.ic-alert-variant-success) .alert-icon svg{fill:var(--ic-alert-icon-success)}:host(.ic-alert-variant-ai) .alert-icon svg{fill:var(--ic-alert-icon-ai)}.alert-content{display:flex;align-items:center;margin-left:1.125rem;width:100%;flex-wrap:wrap}.alert-message{display:flex;align-items:center;padding:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;flex:1;--ic-typography-color:var(--ic-alert-description)}.alert-message-title-above{display:inline}.alert-title{margin-right:var(--ic-space-xs);margin-top:0;margin-bottom:auto;--ic-typography-color:var(--ic-alert-title)}.alert-title-above{white-space:normal}.alert-action-container{margin-right:var(--ic-space-xs);display:flex;align-items:center}.dismiss-icon{margin-right:var(--ic-space-xxxs);margin-left:-0.375rem;padding:0.375rem;border:none;border-radius:50%;background-color:inherit;display:flex;align-items:center;justify-content:center}.dismiss-icon>svg{color:var(--ic-alert-icon-dismissible)}.dismiss-icon:hover{cursor:pointer}@media (max-width: 628px){.alert-message{display:inline}.alert-title{white-space:normal}.alert-action-container{margin-bottom:var(--ic-space-xs);flex-basis:100%}.alert-icon~.alert-action-container{margin-left:2rem}}@media (forced-colors: active){.container{border:var(--ic-border-hc)}.dismiss-icon>svg{color:var(--ic-architectural-white)}}";

package/dist/esm/ic-back-to-top.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { c as onComponentPropUndefinedChange, o as onComponentRequiredPropUndefined } from './helpers-0f85537f.js';
+import { c as onComponentPropUndefinedChange, o as onComponentRequiredPropUndefined } from './helpers-66681c73.js';
 import './constants-ab12fdcf.js';
 
 const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true">
@@ -7,7 +7,7 @@ const ArrowUpward = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
 </svg>
 `;
 
-const icBackToTopCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex:row;height:0.1px}:host(.ic-back-to-top-right){justify-content:flex-end}:host(.ic-back-to-top-right) ic-button{margin-right:var(--margin-right, 1rem)}:host(.ic-back-to-top-right) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-left){justify-content:flex-start}:host(.ic-back-to-top-left) ic-button{margin-left:var(--margin-left, 1rem)}:host(.ic-back-to-top-left) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-center){justify-content:center}:host(.ic-back-to-top-center) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}ic-button{height:2.5rem;align-items:center;background-color:var(--ic-color-background-primary);border-radius:5rem;box-shadow:var(--ic-elevation-overlay);visibility:hidden;position:fixed;bottom:var(--ic-space-md);opacity:0;transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);z-index:var(--ic-z-index-back-to-top)}:host(.ic-back-to-top-variant-icon) ic-button::part(button){margin:0}ic-button::part(button){border-radius:5rem}ic-button.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}ic-button.offset-banner:not(.by-footer){margin-bottom:var(--footer-offset, var(--ic-space-lg))}.ic-back-to-top-icon>svg{height:var(--ic-space-md);width:var(--ic-space-md)}.icon-only{width:2.5rem}.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-1px))}ic-button.by-footer{position:relative;bottom:var(--footer-offset, 3.5rem)}@media (forced-colors: active){.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-xxxs))}}";
+const icBackToTopCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex:row;height:0.1px}:host(.ic-back-to-top-right){justify-content:flex-end}:host(.ic-back-to-top-right) ic-button{margin-right:var(--margin-right, 1rem)}:host(.ic-back-to-top-right) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-left){justify-content:flex-start}:host(.ic-back-to-top-left) ic-button{margin-left:var(--margin-left, 1rem)}:host(.ic-back-to-top-left) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}:host(.ic-back-to-top-center){justify-content:center}:host(.ic-back-to-top-center) .ic-back-to-top-icon{padding-top:var(--ic-space-xxs);padding-right:var(--ic-space-xs)}ic-button{height:2.5rem;align-items:center;background-color:var(--ic-color-background-primary);border-radius:5rem;box-shadow:var(--ic-elevation-overlay);visibility:hidden;position:fixed;bottom:var(--ic-space-md);opacity:0;transition:visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);z-index:var(--ic-z-index-back-to-top)}:host(.ic-back-to-top-variant-icon) ic-button::part(button){margin:0}ic-button::part(button){border-radius:5rem}ic-button.show{visibility:visible;opacity:1;transition:visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast)}ic-button.offset-banner:not(.by-footer){margin-bottom:var(--footer-offset, var(--ic-space-lg))}.ic-back-to-top-icon>svg{height:var(--ic-space-md);width:var(--ic-space-md)}.icon-only{width:2.5rem}.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-1px))}ic-button.by-footer{position:relative;bottom:var(--footer-offset, 3.5rem)}@media (forced-colors: active){.icon-only .ic-back-to-top-icon>svg{padding-left:calc(var(--ic-space-xs) - var(--ic-space-xxxs))}}@media (prefers-reduced-motion: reduce){ic-button,ic-button.show{transition:none}}";
 const IcBackToTopStyle0 = icBackToTopCss;
 
 const backToTopLabel = "Back to top";

package/dist/esm/ic-back-to-top.entry.js.map

@@ -1 +1 @@
-{"file":"ic-back-to-top.entry.js","mappings":"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","names":[],"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-back-to-top: z-index of back to top\n * @prop --margin-right: right y-position of back to top\n * @prop --margin-left: left y-position of back to top\n * @prop --footer-offset: offset of x-position from footer\n */\n\n:host {\n  display: flex;\n  flex: row;\n  height: 0.1px;\n}\n\n:host(.ic-back-to-top-right) {\n  justify-content: flex-end;\n}\n\n:host(.ic-back-to-top-right) ic-button {\n  margin-right: var(--margin-right, 1rem);\n}\n\n:host(.ic-back-to-top-right) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\n:host(.ic-back-to-top-left) {\n  justify-content: flex-start;\n}\n\n:host(.ic-back-to-top-left) ic-button {\n  margin-left: var(--margin-left, 1rem);\n}\n\n:host(.ic-back-to-top-left) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\n:host(.ic-back-to-top-center) {\n  justify-content: center;\n}\n\n:host(.ic-back-to-top-center) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\nic-button {\n  height: 2.5rem;\n  align-items: center;\n  background-color: var(--ic-color-background-primary);\n  border-radius: 5rem;\n  box-shadow: var(--ic-elevation-overlay);\n  visibility: hidden;\n  position: fixed;\n  bottom: var(--ic-space-md);\n  opacity: 0;\n  transition: visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);\n  z-index: var(--ic-z-index-back-to-top);\n}\n\n:host(.ic-back-to-top-variant-icon) ic-button::part(button) {\n  margin: 0;\n}\n\nic-button::part(button) {\n  border-radius: 5rem;\n}\n\nic-button.show {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast);\n}\n\nic-button.offset-banner:not(.by-footer) {\n  margin-bottom: var(--footer-offset, var(--ic-space-lg));\n}\n\n.ic-back-to-top-icon > svg {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n.icon-only {\n  width: 2.5rem;\n}\n\n.icon-only .ic-back-to-top-icon > svg {\n  padding-left: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\nic-button.by-footer {\n  position: relative;\n  bottom: var(--footer-offset, 3.5rem);\n}\n\n@media (forced-colors: active) {\n  .icon-only .ic-back-to-top-icon > svg {\n    padding-left: calc(var(--ic-space-xs) - var(--ic-space-xxxs));\n  }\n}\n","import { Component, h, Host, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport {\n  IcBackToTopVariants,\n  IcBackToTopPositions,\n} from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element | null;\n  private topObserver: IntersectionObserver | null = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The horizontal position of the element.\n   */\n  @Prop() position?: IcBackToTopPositions = \"right\";\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the button to render\n   */\n  @Prop() variant?: IcBackToTopVariants = \"default\";\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private getObservedEl = () => {\n    return document.querySelector(\"#ic-back-to-top-target\");\n  };\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    this.footerVisible =\n      typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element | null => {\n    let targetElement = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = this.getObservedEl();\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = this.targetEl\n      ? getComputedStyle(this.targetEl).marginTop\n      : 0;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl?.scrollIntoView();\n    }\n    // Get virtual cursor to move\n    (this.getObservedEl() as HTMLElement).focus();\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  render() {\n    const { variant, bannerOffset, targetElVisible, footerVisible } = this;\n    const btnVariant = variant === \"icon\" ? \"icon-secondary\" : \"secondary\";\n    const size = variant === \"icon\" ? \"large\" : \"medium\";\n    const label = variant === \"icon\" ? \"\" : backToTopLabel;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          [`ic-back-to-top-${this.position}`]: true,\n          [`ic-back-to-top-variant-icon`]: variant === \"icon\",\n        }}\n      >\n        <ic-button\n          aria-label={backToTopLabel}\n          variant={btnVariant}\n          size={size}\n          onClick={this.handleClick}\n          class={{\n            [\"offset-banner\"]: bannerOffset,\n            [\"show\"]: !targetElVisible,\n            [\"by-footer\"]: footerVisible,\n            [\"icon-only\"]: variant === \"icon\",\n          }}\n          theme={this.theme}\n        >\n          <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n          {label}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-back-to-top.entry.js","mappings":"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","names":[],"sources":["src/components/ic-back-to-top/ic-back-to-top.css?tag=ic-back-to-top&encapsulation=shadow","src/components/ic-back-to-top/ic-back-to-top.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-back-to-top: z-index of back to top\n * @prop --margin-right: right y-position of back to top\n * @prop --margin-left: left y-position of back to top\n * @prop --footer-offset: offset of x-position from footer\n */\n\n:host {\n  display: flex;\n  flex: row;\n  height: 0.1px;\n}\n\n:host(.ic-back-to-top-right) {\n  justify-content: flex-end;\n}\n\n:host(.ic-back-to-top-right) ic-button {\n  margin-right: var(--margin-right, 1rem);\n}\n\n:host(.ic-back-to-top-right) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\n:host(.ic-back-to-top-left) {\n  justify-content: flex-start;\n}\n\n:host(.ic-back-to-top-left) ic-button {\n  margin-left: var(--margin-left, 1rem);\n}\n\n:host(.ic-back-to-top-left) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\n:host(.ic-back-to-top-center) {\n  justify-content: center;\n}\n\n:host(.ic-back-to-top-center) .ic-back-to-top-icon {\n  padding-top: var(--ic-space-xxs);\n  padding-right: var(--ic-space-xs);\n}\n\nic-button {\n  height: 2.5rem;\n  align-items: center;\n  background-color: var(--ic-color-background-primary);\n  border-radius: 5rem;\n  box-shadow: var(--ic-elevation-overlay);\n  visibility: hidden;\n  position: fixed;\n  bottom: var(--ic-space-md);\n  opacity: 0;\n  transition: visibility 0s linear var(--ic-transition-duration-slow),\n    opacity var(--ic-transition-duration-slow);\n  z-index: var(--ic-z-index-back-to-top);\n}\n\n:host(.ic-back-to-top-variant-icon) ic-button::part(button) {\n  margin: 0;\n}\n\nic-button::part(button) {\n  border-radius: 5rem;\n}\n\nic-button.show {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s linear 0s,\n    opacity var(--ic-transition-duration-slow),\n    box-shadow var(--ic-easing-transition-fast);\n}\n\nic-button.offset-banner:not(.by-footer) {\n  margin-bottom: var(--footer-offset, var(--ic-space-lg));\n}\n\n.ic-back-to-top-icon > svg {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n.icon-only {\n  width: 2.5rem;\n}\n\n.icon-only .ic-back-to-top-icon > svg {\n  padding-left: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\nic-button.by-footer {\n  position: relative;\n  bottom: var(--footer-offset, 3.5rem);\n}\n\n@media (forced-colors: active) {\n  .icon-only .ic-back-to-top-icon > svg {\n    padding-left: calc(var(--ic-space-xs) - var(--ic-space-xxxs));\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ic-button,\n  ic-button.show {\n    transition: none;\n  }\n}\n","import { Component, h, Host, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport {\n  IcBackToTopVariants,\n  IcBackToTopPositions,\n} from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element | null;\n  private topObserver: IntersectionObserver | null = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The horizontal position of the element.\n   */\n  @Prop() position?: IcBackToTopPositions = \"right\";\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the button to render\n   */\n  @Prop() variant?: IcBackToTopVariants = \"default\";\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private getObservedEl = () => {\n    return document.querySelector(\"#ic-back-to-top-target\");\n  };\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    this.footerVisible =\n      typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element | null => {\n    let targetElement = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = this.getObservedEl();\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = this.targetEl\n      ? getComputedStyle(this.targetEl).marginTop\n      : 0;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl?.scrollIntoView();\n    }\n    // Get virtual cursor to move\n    (this.getObservedEl() as HTMLElement).focus();\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  render() {\n    const { variant, bannerOffset, targetElVisible, footerVisible } = this;\n    const btnVariant = variant === \"icon\" ? \"icon-secondary\" : \"secondary\";\n    const size = variant === \"icon\" ? \"large\" : \"medium\";\n    const label = variant === \"icon\" ? \"\" : backToTopLabel;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          [`ic-back-to-top-${this.position}`]: true,\n          [`ic-back-to-top-variant-icon`]: variant === \"icon\",\n        }}\n      >\n        <ic-button\n          aria-label={backToTopLabel}\n          variant={btnVariant}\n          size={size}\n          onClick={this.handleClick}\n          class={{\n            [\"offset-banner\"]: bannerOffset,\n            [\"show\"]: !targetElVisible,\n            [\"by-footer\"]: footerVisible,\n            [\"icon-only\"]: variant === \"icon\",\n          }}\n          theme={this.theme}\n        >\n          <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n          {label}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-badge.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { d as convertToRGBA, g as getBrandForegroundAppearance, e as isPropDefined, o as onComponentRequiredPropUndefined } from './helpers-0f85537f.js';
+import { d as convertToRGBA, g as getBrandForegroundAppearance, e as isPropDefined, o as onComponentRequiredPropUndefined } from './helpers-66681c73.js';
 import './constants-ab12fdcf.js';
 
-const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.ic-badge-show){animation:expand var(--ic-transition-duration-slow)}:host(.ic-badge-hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host ic-typography{--ic-typography-color:var(--ic-badge-text)}:host(.ic-badge-neutral){background-color:var(--ic-badge-dark) !important}:host(.ic-badge-light) ic-typography{--ic-typography-color:var(--ic-badge-text-monochrome)}:host(.ic-badge-light) ::slotted(*){fill:var(--ic-badge-icon-monochrome)}:host(.ic-badge-info){background-color:var(--ic-badge-info) !important}:host(.ic-badge-light){background-color:var(--ic-badge-light) !important}:host(.ic-badge-warning){background-color:var(--ic-badge-warning) !important}:host(.ic-badge-warning) ic-typography{--ic-typography-color:var(--ic-badge-warning-text)}:host(.ic-badge-warning) ::slotted(*){fill:var(--ic-badge-warning-icon)}:host(.ic-badge-error){background-color:var(--ic-badge-error) !important}:host(.ic-badge-success){background-color:var(--ic-badge-success) !important}:host(.ic-badge-ai){background-color:var(--ic-badge-ai) !important}:host(.ic-badge-small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.ic-badge-large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-medium){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.ic-badge-dot.ic-badge-small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.ic-badge-dot.ic-badge-large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host ::slotted(*){fill:var(--ic-badge-icon)}:host(.ic-badge-foreground-dark) ::slotted(*){fill:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ::slotted(*){fill:white}:host(.ic-badge-foreground-dark) ic-typography{--ic-typography-color:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ic-typography{--ic-typography-color:var(--ic-color-text-primary-dark)}:host(.ic-badge-text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-text.ic-badge-small) ic-typography{padding:0 0.2132rem}:host(.ic-badge-text.ic-badge-large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.ic-badge-icon.ic-badge-small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.ic-badge-icon.ic-badge-large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.ic-badge-far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.ic-badge-far.ic-badge-small),:host(.ic-badge-dot.ic-badge-far.ic-badge-large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-far),:host(.ic-badge-dot.ic-badge-far.ic-badge-small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.ic-badge-near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.ic-badge-dot.ic-badge-near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.ic-badge-inline){position:static}:host(.ic-badge-hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
+const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.ic-badge-show){animation:expand var(--ic-transition-duration-slow)}:host(.ic-badge-hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host ic-typography{--ic-typography-color:var(--ic-badge-text)}:host(.ic-badge-neutral){background-color:var(--ic-badge-dark) !important}:host(.ic-badge-light) ic-typography{--ic-typography-color:var(--ic-badge-text-monochrome)}:host(.ic-badge-light) ::slotted(*){fill:var(--ic-badge-icon-monochrome)}:host(.ic-badge-info){background-color:var(--ic-badge-info) !important}:host(.ic-badge-light){background-color:var(--ic-badge-light) !important}:host(.ic-badge-warning){background-color:var(--ic-badge-warning) !important}:host(.ic-badge-warning) ic-typography{--ic-typography-color:var(--ic-badge-warning-text)}:host(.ic-badge-warning) ::slotted(*){fill:var(--ic-badge-warning-icon)}:host(.ic-badge-error){background-color:var(--ic-badge-error) !important}:host(.ic-badge-success){background-color:var(--ic-badge-success) !important}:host(.ic-badge-ai){background-color:var(--ic-badge-ai) !important}:host(.ic-badge-small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.ic-badge-large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-medium){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.ic-badge-dot.ic-badge-small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.ic-badge-dot.ic-badge-large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host ::slotted(*){fill:var(--ic-badge-icon)}:host(.ic-badge-foreground-dark) ::slotted(*){fill:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ::slotted(*){fill:white}:host(.ic-badge-foreground-dark) ic-typography{--ic-typography-color:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ic-typography{--ic-typography-color:var(--ic-color-text-primary-dark)}:host(.ic-badge-text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-text.ic-badge-small) ic-typography{padding:0 0.2132rem}:host(.ic-badge-text.ic-badge-large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.ic-badge-icon.ic-badge-small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.ic-badge-icon.ic-badge-large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.ic-badge-far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.ic-badge-far.ic-badge-small),:host(.ic-badge-dot.ic-badge-far.ic-badge-large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-far),:host(.ic-badge-dot.ic-badge-far.ic-badge-small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.ic-badge-near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.ic-badge-dot.ic-badge-near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.ic-badge-inline){position:static}:host(.ic-badge-hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}@media (prefers-reduced-motion: reduce){:host(.ic-badge-hide){transition:none}}";
 const IcBadgeStyle0 = icBadgeCss;
 
 const TOP_NAVIGATION = "IC-TOP-NAVIGATION";

package/dist/esm/ic-badge.entry.js.map

@@ -1 +1 @@
-{"file":"ic-badge.entry.js","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.ic-badge-show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.ic-badge-hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host ic-typography {\n  --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n  background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n  --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n  fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n  background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n  background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n  background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n  --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n  fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n  background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n  background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-ai) {\n  background-color: var(--ic-badge-ai) !important;\n}\n\n:host(.ic-badge-small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-medium) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-dot.ic-badge-large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n  fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-dark);\n}\n\n:host(.ic-badge-text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-text.ic-badge-small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.ic-badge-far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.ic-badge-dot.ic-badge-near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n  position: static;\n}\n\n:host(.ic-badge-hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcSizes,\n  IcBrandForeground,\n  IcColor,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getBrandForegroundAppearance,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\nconst SIDE_NAVIGATION = \"IC-SIDE-NAVIGATION\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string | null = null;\n  private foregroundColour: IcBrandForeground;\n  private parentAriaLabel: string;\n  private initialPosition: IcBadgePositions = this.position ?? \"far\";\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and label is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() label?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    if (this.variant === \"custom\") {\n      this.setBadgeColour();\n    }\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop() visible?: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Badge\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.isInTopNav() && this.setPositionInTopNavigation();\n    this.isInSideNav() && this.setPositionInSideNavigation();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.isInTopNav() && (this.position = \"inline\");\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.isInTopNav() && (this.position = this.initialPosition);\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n      this.foregroundColour = getBrandForegroundAppearance(\n        (r * 299 + g * 587 + b * 114) / 1000\n      );\n    }\n  };\n\n  private getLabel = () =>\n    this.maxNumber && Number(this.label) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.label;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.label || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : null;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private setPositionInTopNavigation = () => {\n    this.position =\n      this.isInMobileMode() || this.isInNavigationItem()\n        ? \"inline\"\n        : this.initialPosition;\n  };\n\n  private setPositionInSideNavigation = () => {\n    this.position = \"near\";\n  };\n\n  private isInTopNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === TOP_NAVIGATION ||\n      greatGrandparentEl?.tagName === TOP_NAVIGATION\n    );\n  };\n\n  private isInSideNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === SIDE_NAVIGATION ||\n      greatGrandparentEl?.tagName === SIDE_NAVIGATION\n    );\n  };\n\n  private isInMobileMode = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      ((grandparentEl?.tagName === TOP_NAVIGATION ||\n        grandparentEl?.tagName === SIDE_NAVIGATION) &&\n        grandparentEl.classList.contains(\"mobile-mode\")) ||\n      ((greatGrandparentEl?.tagName === TOP_NAVIGATION ||\n        greatGrandparentEl?.tagName === SIDE_NAVIGATION) &&\n        greatGrandparentEl.classList.contains(\"mobile-mode\"))\n    );\n  };\n\n  private isInNavigationItem = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    return parentEl.tagName === \"IC-NAVIGATION-ITEM\";\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getLabel,\n      position,\n      size,\n      label,\n      type,\n      variant,\n      visible,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-badge-${position}`]: true,\n          [`ic-badge-${size}`]: true,\n          [`ic-badge-${variant}`]: true,\n          [`ic-badge-${type}`]: true,\n          [`ic-badge-foreground-${foregroundColour}`]:\n            foregroundColour !== null && variant === \"custom\",\n          [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && label && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-badge.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,qpIAAqpI,CAAC;AACzqI,sBAAe,UAAU;;AC0BzB,MAAM,cAAc,GAAG,mBAAmB,CAAC;AAC3C,MAAM,eAAe,GAAG,oBAAoB,CAAC;MAYhC,KAAK;IAPlB;;;QAQU,cAAS,GAAkB,IAAI,CAAC;QAGhC,oBAAe,GAAqB,MAAA,IAAI,CAAC,QAAQ,mCAAI,KAAK,CAAC;;;;QAkC1C,aAAQ,GAAsB,KAAK,CAAC;;;;QAKrD,SAAI,GAAa,QAAQ,CAAC;;;;QAU1B,UAAK,GAAiB,SAAS,CAAC;;;;QAKhC,SAAI,GAAkB,MAAM,CAAC;;;;QAK7B,YAAO,GAAqB,SAAS,CAAC;;;;QAYtC,YAAO,GAAa,IAAI,CAAC;QAsCzB,mBAAc,GAAG;YACvB,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;YAE5E,IAAI,SAAS,EAAE;gBACb,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;gBACjC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;gBAC/D,IAAI,CAAC,gBAAgB,GAAG,4BAA4B,CAClD,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,IAAI,CACrC,CAAC;aACH;SACF,CAAC;QAEM,aAAQ,GAAG,MACjB,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,SAAS;cACjD,GAAG,IAAI,CAAC,SAAS,GAAG;cACpB,IAAI,CAAC,KAAK,CAAC;;;QAIT,uBAAkB,GAAG;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YACvC,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,EAAE;kBACpD,IAAI,CAAC,eAAe;kBACpB,IAAI,CAAC,KAAK,IAAI,4BAA4B,CAAC;YAE/C,IAAI,QAAQ,EAAE;gBACZ,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;gBAC7B,IACE,OAAO,KAAK,SAAS;qBACpB,OAAO,KAAK,QAAQ,KAAK,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,EACxE;oBACA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe;0BACxC,GAAG,IAAI,CAAC,eAAe,IAAI;0BAC3B,EAAE,CAAC;oBACP,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO;0BAC7B,GAAG,eAAe,IAAI,gBAAgB,EAAE;0BACxC,IAAI,CAAC;iBACV;qBAAM;oBACL,IAAI,CAAC,SAAS,GAAG,KAAK,gBAAgB,EAAE,CAAC;iBAC1C;aACF;SACF,CAAC;QAEM,+BAA0B,GAAG;YACnC,IAAI,CAAC,QAAQ;gBACX,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE;sBAC9C,QAAQ;sBACR,IAAI,CAAC,eAAe,CAAC;SAC5B,CAAC;QAEM,gCAA2B,GAAG;YACpC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;SACxB,CAAC;QAEM,eAAU,GAAG;YACnB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YACvC,IAAI,CAAC,QAAQ;gBAAE,OAAO,KAAK,CAAC;YAC5B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;YAC7C,MAAM,kBAAkB,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC;YACxD,QACE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,cAAc;gBACzC,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,MAAK,cAAc,EAC9C;SACH,CAAC;QAEM,gBAAW,GAAG;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YACvC,IAAI,CAAC,QAAQ;gBAAE,OAAO,KAAK,CAAC;YAC5B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;YAC7C,MAAM,kBAAkB,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC;YACxD,QACE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,eAAe;gBAC1C,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,MAAK,eAAe,EAC/C;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YACvC,IAAI,CAAC,QAAQ;gBAAE,OAAO,KAAK,CAAC;YAC5B,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;YAC7C,MAAM,kBAAkB,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC;YACxD,QACE,CAAC,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,cAAc;gBACzC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,OAAO,MAAK,eAAe;gBAC1C,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC;iBAChD,CAAC,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,MAAK,cAAc;oBAC9C,CAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,OAAO,MAAK,eAAe;oBAC/C,kBAAkB,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EACvD;SACH,CAAC;QAEM,uBAAkB,GAAG;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;YACvC,IAAI,CAAC,QAAQ;gBAAE,OAAO,KAAK,CAAC;YAC5B,OAAO,QAAQ,CAAC,OAAO,KAAK,oBAAoB,CAAC;SAClD,CAAC;QAEM,6BAAwB,GAAG,MACjC,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC;KA2CxE;IAhPC,sBAAsB;QACpB,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IASD,kBAAkB;QAChB,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;KACpD;IAuCD,cAAc;QACZ,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;YAC7B,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAQD,cAAc;QACZ,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,iBAAiB;;QACf,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QAEnD,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC;QACnD,IAAI,SAAS;YAAE,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QAChD,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,KAAK,MAAM;YAClB,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,OAAO,CACR,CAAC;KACL;IAED,mBAAmB;QACjB,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACvD,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,2BAA2B,EAAE,CAAC;KAC1D;IAGD,qBAAqB;QACnB,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,CAAC;KACjD;IAGD,sBAAsB;QACpB,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;KAC7D;IAsGD,MAAM;QACJ,MAAM,EACJ,SAAS,EACT,EAAE,EACF,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,KAAK,GACN,GAAG,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,YAAY,QAAQ,EAAE,GAAG,IAAI;gBAC9B,CAAC,YAAY,IAAI,EAAE,GAAG,IAAI;gBAC1B,CAAC,YAAY,OAAO,EAAE,GAAG,IAAI;gBAC7B,CAAC,YAAY,IAAI,EAAE,GAAG,IAAI;gBAC1B,CAAC,uBAAuB,gBAAgB,EAAE,GACxC,gBAAgB,KAAK,IAAI,IAAI,OAAO,KAAK,QAAQ;gBACnD,CAAC,GAAG,OAAO,GAAG,eAAe,GAAG,eAAe,EAAE,GAAG,IAAI;gBACxD,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,EACD,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,IAAI,gBACL,SAAS,EACrB,IAAI,EAAC,QAAQ,IAEZ,IAAI,KAAK,MAAM,IAAI,6DAAM,IAAI,EAAC,YAAY,GAAQ,EAClD,IAAI,KAAK,MAAM,IAAI,KAAK,KACvB,sEAAe,OAAO,EAAE,IAAI,KAAK,OAAO,GAAG,aAAa,GAAG,OAAO,IAC/D,QAAQ,EAAE,CACG,CACjB,EACA,IAAI,KAAK,KAAK,IAAI,6DAAM,KAAK,EAAC,SAAS,YAAa,CAChD,EACP;KACH;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n  :host(.ic-badge-show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.ic-badge-hide) {\n    animation: shrink var(--ic-transition-duration-slow);\n  }\n}\n\n:host {\n  display: flex;\n  height: var(--ic-space-md);\n  min-width: var(--ic-space-md);\n  width: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host ic-typography {\n  --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n  background-color: var(--ic-badge-dark) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n  --ic-typography-color: var(--ic-badge-text-monochrome);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n  fill: var(--ic-badge-icon-monochrome);\n}\n\n:host(.ic-badge-info) {\n  background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n  background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n  background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n  --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n  fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n  background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n  background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-ai) {\n  background-color: var(--ic-badge-ai) !important;\n}\n\n:host(.ic-badge-small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-large) {\n  height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n  min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-medium) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-small) {\n  height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n  min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-dot.ic-badge-large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n  fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-dark);\n}\n\n:host(.ic-badge-text) ic-typography {\n  align-self: center;\n  padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-text.ic-badge-small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-large) ic-typography {\n  padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px);\n}\n\n:host(.ic-badge-icon) ::slotted(svg) {\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n  padding: var(--ic-space-xxxs);\n}\n\n:host(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-large) ::slotted(svg) {\n  width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n  padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.ic-badge-far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-near) {\n  top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n  right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.ic-badge-dot.ic-badge-near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n  position: static;\n}\n\n:host(.ic-badge-hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n\n@keyframes expand {\n  from {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes shrink {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.ic-badge-hide) {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcSizes,\n  IcBrandForeground,\n  IcColor,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getBrandForegroundAppearance,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\nconst SIDE_NAVIGATION = \"IC-SIDE-NAVIGATION\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string | null = null;\n  private foregroundColour: IcBrandForeground;\n  private parentAriaLabel: string;\n  private initialPosition: IcBadgePositions = this.position ?? \"far\";\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  /**\n   * The custom badge colour. This will only style the badge component if variant=\"custom\".\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and label is not empty.\n   */\n  @Prop() maxNumber?: number;\n\n  /**\n   * The positioning of the badge in reference to the parent element.\n   */\n  @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n  /**\n   * The size of the badge to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() label?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of badge to be displayed.\n   */\n  @Prop() type?: IcBadgeTypes = \"text\";\n\n  /**\n   * The variant of the badge to be displayed.\n   */\n  @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n  @Watch(\"variant\")\n  variantHandler(): void {\n    if (this.variant === \"custom\") {\n      this.setBadgeColour();\n    }\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop() visible?: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Badge\"\n      );\n  }\n\n  componentWillRender(): void {\n    this.isInTopNav() && this.setPositionInTopNavigation();\n    this.isInSideNav() && this.setPositionInSideNavigation();\n  }\n\n  @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n  navBarMenuOpenHandler(): void {\n    this.isInTopNav() && (this.position = \"inline\");\n  }\n\n  @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n  navBarMenuCloseHandler(): void {\n    this.isInTopNav() && (this.position = this.initialPosition);\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n      this.foregroundColour = getBrandForegroundAppearance(\n        (r * 299 + g * 587 + b * 114) / 1000\n      );\n    }\n  };\n\n  private getLabel = () =>\n    this.maxNumber && Number(this.label) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.label;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.label || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : null;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private setPositionInTopNavigation = () => {\n    this.position =\n      this.isInMobileMode() || this.isInNavigationItem()\n        ? \"inline\"\n        : this.initialPosition;\n  };\n\n  private setPositionInSideNavigation = () => {\n    this.position = \"near\";\n  };\n\n  private isInTopNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === TOP_NAVIGATION ||\n      greatGrandparentEl?.tagName === TOP_NAVIGATION\n    );\n  };\n\n  private isInSideNav = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      grandparentEl?.tagName === SIDE_NAVIGATION ||\n      greatGrandparentEl?.tagName === SIDE_NAVIGATION\n    );\n  };\n\n  private isInMobileMode = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    const grandparentEl = parentEl.parentElement;\n    const greatGrandparentEl = grandparentEl?.parentElement;\n    return (\n      ((grandparentEl?.tagName === TOP_NAVIGATION ||\n        grandparentEl?.tagName === SIDE_NAVIGATION) &&\n        grandparentEl.classList.contains(\"mobile-mode\")) ||\n      ((greatGrandparentEl?.tagName === TOP_NAVIGATION ||\n        greatGrandparentEl?.tagName === SIDE_NAVIGATION) &&\n        greatGrandparentEl.classList.contains(\"mobile-mode\"))\n    );\n  };\n\n  private isInNavigationItem = (): boolean => {\n    const parentEl = this.el.parentElement;\n    if (!parentEl) return false;\n    return parentEl.tagName === \"IC-NAVIGATION-ITEM\";\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getLabel,\n      position,\n      size,\n      label,\n      type,\n      variant,\n      visible,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-badge-${position}`]: true,\n          [`ic-badge-${size}`]: true,\n          [`ic-badge-${variant}`]: true,\n          [`ic-badge-${type}`]: true,\n          [`ic-badge-foreground-${foregroundColour}`]:\n            foregroundColour !== null && variant === \"custom\",\n          [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && label && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-breadcrumb-group.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { D as DEVICE_SIZES, f as getCurrentDeviceSize, h as checkResizeObserver } from './helpers-0f85537f.js';
+import { D as DEVICE_SIZES, f as getCurrentDeviceSize, h as checkResizeObserver } from './helpers-66681c73.js';
 import './constants-ab12fdcf.js';
 
-const icBreadcrumbGroupCss = ":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";
+const icBreadcrumbGroupCss = ":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}@media (prefers-reduced-motion: reduce){:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){transition:none}}";
 const IcBreadcrumbGroupStyle0 = icBreadcrumbGroupCss;
 
 const BreadcrumbGroup = class {

package/dist/esm/ic-breadcrumb-group.entry.js.map

@@ -1 +1 @@
-{"file":"ic-breadcrumb-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host ol {\n  display: flex;\n  list-style-type: none;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n  display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n  display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n  ol\n  ::slotted(ic-breadcrumb.visuallyhidden) {\n  display: block;\n  opacity: 0;\n  transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n  opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private IC_BREADCRUMB = \"ic-breadcrumb\";\n  private SHOW_BACK_ICON = \"show-back-icon\";\n  private collapsedBreadcrumbEl?: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[] = [];\n  private collapsedBreadcrumbWrapper?: HTMLIcBreadcrumbElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private lastParentBreadcrumb: HTMLIcBreadcrumbElement | null = null;\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop({ mutable: true }) collapsed = false;\n  @Watch(\"collapsed\")\n  watchCollapsedHandler(): void {\n    this.setCollapsed();\n  }\n\n  /**\n   * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.setBreadcrumbMonochrome();\n  }\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  @Watch(\"theme\")\n  watchThemeHandler(): void {\n    this.setBreadcrumbTheme();\n  }\n\n  componentWillLoad(): void {\n    this.setBreadcrumbTheme();\n    this.setBreadcrumbMonochrome();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (\n      this.collapsed &&\n      this.el.querySelectorAll(this.IC_BREADCRUMB).length > 2\n    ) {\n      if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n        this.setLastParentCollapsedBackBreadcrumb();\n      } else {\n        this.setCollapsed();\n      }\n    }\n\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n  }\n\n  disconnectedCallback(): void {\n    this.lastParentBreadcrumb?.removeEventListener(\n      \"transitionend\",\n      this.transitionendHandler\n    );\n\n    this.collapsedBreadcrumbEl?.removeEventListener(\"click\", this.clickHandler);\n  }\n\n  private setBreadcrumbTheme = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\n      breadcrumb.theme = this.theme;\n    });\n  };\n\n  private setBreadcrumbMonochrome = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\n      breadcrumb.monochrome = this.monochrome;\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setLastParentCollapsedBackBreadcrumb();\n    } else {\n      this.revertLastParentCollapsedBreadcrumb();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs = this.el.querySelectorAll<HTMLIcBreadcrumbElement>(\n      this.IC_BREADCRUMB\n    );\n\n    return allBreadcrumbs.length > 1\n      ? allBreadcrumbs[allBreadcrumbs.length - 2]\n      : null;\n  };\n\n  private setCollapsed = () => {\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.remove(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"fade\");\n    });\n\n    if (this.collapsed) {\n      this.renderCollapsedBreadcrumb();\n      const allBreadcrumbs = Array.from(\n        this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n      );\n\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n      if (!this.backBreadcrumbOnly) {\n        this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n          breadcrumb.classList.add(\"hide\")\n        );\n      }\n\n      if (this.collapsedBreadcrumbWrapper) {\n        allBreadcrumbs[0]?.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    } else {\n      this.collapsedBreadcrumbWrapper?.remove();\n    }\n  };\n\n  private clickHandler = () => {\n    this.collapsedBreadcrumbWrapper?.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n    });\n    this.collapsed = false;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    if (this.collapsedBreadcrumbEl === undefined) {\n      this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n      this.collapsedBreadcrumbWrapper.classList.add(\n        \"collapsed-breadcrumb-wrapper\"\n      );\n      this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n      const ariaLabel = document.createElement(\"span\");\n      ariaLabel.id = \"collapsed-button-label\";\n      ariaLabel.innerText = \"Collapsed breadcrumbs\";\n      ariaLabel.className = \"hide\";\n      this.collapsedBreadcrumbEl.setAttribute(\"aria-labelledby\", ariaLabel.id);\n\n      const ariaDescribed = document.createElement(\"span\");\n      ariaDescribed.id = \"collapsed-button-described\";\n      ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n      ariaDescribed.className = \"hide\";\n      this.collapsedBreadcrumbEl.setAttribute(\n        \"aria-describedby\",\n        ariaDescribed.id\n      );\n\n      this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n      this.collapsedBreadcrumbEl.innerText = \"...\";\n      this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n      this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n      this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n      this.collapsedBreadcrumbWrapper.append(ariaLabel);\n      this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n    }\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.remove(\"hide\");\n      this.lastParentBreadcrumb.classList.add(\"show\");\n    }\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n      if (this.collapsed) {\n        this.lastParentBreadcrumb.classList.add(\"hide\");\n      }\n    }\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      const isSmallDevice = this.deviceSize <= DEVICE_SIZES.S;\n      this.el.setAttribute(\"back-breadcrumb-only\", `${isSmallDevice}`);\n\n      if (isSmallDevice) {\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        const allBreadcrumbs = Array.from(\n          this.el.querySelectorAll(this.IC_BREADCRUMB)\n        );\n\n        if (this.collapsed && allBreadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          this.setCollapsed();\n        } else {\n          allBreadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n          });\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const { backBreadcrumbOnly, collapsed, theme } = this;\n\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-group-back\": backBreadcrumbOnly,\n          \"ic-breadcrumb-group-collapsed\": collapsed,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-breadcrumb-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host ol {\n  display: flex;\n  list-style-type: none;\n  align-items: center;\n  flex-wrap: wrap;\n  padding: 0;\n  margin: 0;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n  display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n  display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n  ol\n  ::slotted(ic-breadcrumb.visuallyhidden) {\n  display: block;\n  opacity: 0;\n  transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.ic-breadcrumb-group-collapsed)\n    ol\n    ::slotted(ic-breadcrumb.visuallyhidden) {\n    transition: none;\n  }\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-breadcrumb-group\",\n  styleUrl: \"ic-breadcrumb-group.css\",\n  shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n  private ADD_CLASS_DELAY = 50;\n  private IC_BREADCRUMB = \"ic-breadcrumb\";\n  private SHOW_BACK_ICON = \"show-back-icon\";\n  private collapsedBreadcrumbEl?: HTMLButtonElement;\n  private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[] = [];\n  private collapsedBreadcrumbWrapper?: HTMLIcBreadcrumbElement;\n  private resizeObserver: ResizeObserver | null = null;\n  private lastParentBreadcrumb: HTMLIcBreadcrumbElement | null = null;\n\n  @Element() el: HTMLIcBreadcrumbGroupElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * If `true`, display only a single breadcrumb for the parent page with a back icon.\n   */\n  @Prop() backBreadcrumbOnly = false;\n  @Watch(\"backBreadcrumbOnly\")\n  watchBackBreadcrumbHandler(): void {\n    this.setBackBreadcrumb();\n  }\n\n  /**\n   * If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n   */\n  @Prop({ mutable: true }) collapsed = false;\n  @Watch(\"collapsed\")\n  watchCollapsedHandler(): void {\n    this.setCollapsed();\n  }\n\n  /**\n   * If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.setBreadcrumbMonochrome();\n  }\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  @Watch(\"theme\")\n  watchThemeHandler(): void {\n    this.setBreadcrumbTheme();\n  }\n\n  componentWillLoad(): void {\n    this.setBreadcrumbTheme();\n    this.setBreadcrumbMonochrome();\n\n    if (this.backBreadcrumbOnly) {\n      this.setBackBreadcrumb();\n    } else {\n      checkResizeObserver(this.runResizeObserver);\n    }\n\n    if (\n      this.collapsed &&\n      this.el.querySelectorAll(this.IC_BREADCRUMB).length > 2\n    ) {\n      if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n        this.setLastParentCollapsedBackBreadcrumb();\n      } else {\n        this.setCollapsed();\n      }\n    }\n\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n  }\n\n  disconnectedCallback(): void {\n    this.lastParentBreadcrumb?.removeEventListener(\n      \"transitionend\",\n      this.transitionendHandler\n    );\n\n    this.collapsedBreadcrumbEl?.removeEventListener(\"click\", this.clickHandler);\n  }\n\n  private setBreadcrumbTheme = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\n      breadcrumb.theme = this.theme;\n    });\n  };\n\n  private setBreadcrumbMonochrome = () => {\n    Array.from(\n      this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n    ).forEach((breadcrumb) => {\n      breadcrumb.monochrome = this.monochrome;\n    });\n  };\n\n  private setBackBreadcrumb = () => {\n    if (this.backBreadcrumbOnly) {\n      this.setLastParentCollapsedBackBreadcrumb();\n    } else {\n      this.revertLastParentCollapsedBreadcrumb();\n    }\n  };\n\n  private setBackBreadcrumbAttr = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.add(\"show\");\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n    }\n  };\n\n  private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement | null => {\n    const allBreadcrumbs = this.el.querySelectorAll<HTMLIcBreadcrumbElement>(\n      this.IC_BREADCRUMB\n    );\n\n    return allBreadcrumbs.length > 1\n      ? allBreadcrumbs[allBreadcrumbs.length - 2]\n      : null;\n  };\n\n  private setCollapsed = () => {\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.remove(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"fade\");\n    });\n\n    if (this.collapsed) {\n      this.renderCollapsedBreadcrumb();\n      const allBreadcrumbs = Array.from(\n        this.el.querySelectorAll<HTMLIcBreadcrumbElement>(this.IC_BREADCRUMB)\n      );\n\n      this.collapsedBreadcrumbs = allBreadcrumbs\n        .splice(1, allBreadcrumbs.length - 2)\n        .filter(\n          (breadcrumb) =>\n            !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n        );\n      if (!this.backBreadcrumbOnly) {\n        this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n          breadcrumb.classList.add(\"hide\")\n        );\n      }\n\n      if (this.collapsedBreadcrumbWrapper) {\n        allBreadcrumbs[0]?.insertAdjacentElement(\n          \"afterend\",\n          this.collapsedBreadcrumbWrapper\n        );\n      }\n    } else {\n      this.collapsedBreadcrumbWrapper?.remove();\n    }\n  };\n\n  private clickHandler = () => {\n    this.collapsedBreadcrumbWrapper?.remove();\n    this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n      breadcrumb.classList.add(\"visuallyhidden\");\n      breadcrumb.classList.remove(\"hide\");\n      setTimeout(() => {\n        breadcrumb.classList.add(\"fade\");\n      }, this.ADD_CLASS_DELAY);\n\n      breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n    });\n    this.collapsed = false;\n    // Set focus to first unhidden breadcrumb\n    this.collapsedBreadcrumbs[0].setFocus();\n  };\n\n  private renderCollapsedBreadcrumb = () => {\n    if (this.collapsedBreadcrumbEl === undefined) {\n      this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n      this.collapsedBreadcrumbWrapper.classList.add(\n        \"collapsed-breadcrumb-wrapper\"\n      );\n      this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n      const ariaLabel = document.createElement(\"span\");\n      ariaLabel.id = \"collapsed-button-label\";\n      ariaLabel.innerText = \"Collapsed breadcrumbs\";\n      ariaLabel.className = \"hide\";\n      this.collapsedBreadcrumbEl.setAttribute(\"aria-labelledby\", ariaLabel.id);\n\n      const ariaDescribed = document.createElement(\"span\");\n      ariaDescribed.id = \"collapsed-button-described\";\n      ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n      ariaDescribed.className = \"hide\";\n      this.collapsedBreadcrumbEl.setAttribute(\n        \"aria-describedby\",\n        ariaDescribed.id\n      );\n\n      this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n      this.collapsedBreadcrumbEl.innerText = \"...\";\n      this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n      this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n      this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n      this.collapsedBreadcrumbWrapper.append(ariaLabel);\n      this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n    }\n  };\n\n  private transitionendHandler = (event: TransitionEvent) => {\n    if (event.propertyName === \"opacity\") {\n      (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n    }\n  };\n\n  private setLastParentCollapsedBackBreadcrumb = () => {\n    this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n    this.setBackBreadcrumbAttr();\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.classList.remove(\"hide\");\n      this.lastParentBreadcrumb.classList.add(\"show\");\n    }\n  };\n\n  private revertLastParentCollapsedBreadcrumb = () => {\n    if (this.lastParentBreadcrumb) {\n      this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n      if (this.collapsed) {\n        this.lastParentBreadcrumb.classList.add(\"hide\");\n      }\n    }\n  };\n\n  private resizeObserverCallback = (currSize: number) => {\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n\n      const isSmallDevice = this.deviceSize <= DEVICE_SIZES.S;\n      this.el.setAttribute(\"back-breadcrumb-only\", `${isSmallDevice}`);\n\n      if (isSmallDevice) {\n        if (this.collapsed) {\n          this.setLastParentCollapsedBackBreadcrumb();\n        } else {\n          this.setBackBreadcrumb();\n        }\n      } else {\n        const allBreadcrumbs = Array.from(\n          this.el.querySelectorAll(this.IC_BREADCRUMB)\n        );\n\n        if (this.collapsed && allBreadcrumbs.length > 2) {\n          this.revertLastParentCollapsedBreadcrumb();\n          this.setCollapsed();\n        } else {\n          allBreadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n          });\n        }\n      }\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback(getCurrentDeviceSize());\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    const { backBreadcrumbOnly, collapsed, theme } = this;\n\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-group-back\": backBreadcrumbOnly,\n          \"ic-breadcrumb-group-collapsed\": collapsed,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <nav aria-label=\"breadcrumbs\">\n          <ol>\n            <slot />\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-breadcrumb.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
 import { C as Chevron } from './chevron-icon-589e3b46.js';
-import { E as getSlotElements, i as isSlotUsed } from './helpers-0f85537f.js';
+import { F as getSlotElements, i as isSlotUsed } from './helpers-66681c73.js';
 import './constants-ab12fdcf.js';
 
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">