@ukic/web-components 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/components/ic-toast.js.map

@@ -1 +1 @@
-{"file":"ic-toast.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,27JAA27J;;AC4B98J,MAAM,kCAAkC,GAAG,IAAI,CAAC;AAChD,MAAM,wBAAwB,GAAG,EAAE,CAAC;AACpC,MAAM,wBAAwB,GAAG,GAAG,CAAC;MAWxB,KAAK;;;;;;QAER,wBAAmB,GAA6B,EAAE,CAAC;QA0NnD,kBAAa,GAAG;YACtB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;SACvB,CAAC;QAEM,yBAAoB,GAAG;YAC7B,IAAI,CAAC,aAAa;gBAChB,CAAC,kCAAkC,GAAG,IAAI,CAAC,kBAAkB,IAAI,GAAG,CAAC;SACxE,CAAC;QAkDM,YAAO,GAAG;YAChB,IAAI,IAAI,CAAC,uBAAuB,EAAE;gBAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;aACtB;SACF,CAAC;QAEM,WAAM,GAAG;YACf,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAgB,CAAC,CAAC;SACxD,CAAC;;6BAlRuB,GAAG;uBACT,KAAK;kCAMuB,IAAI;sCAKjB,SAAS;2BAKgB,QAAQ;;;;;;IAEnE,wBAAwB,CAAC,QAA2B;QAClD,IAAI,CAAC,QAAQ,GAAG,QAAQ,KAAK,QAAQ,CAAC;KACvC;IA2BD,oBAAoB;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACzC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACjD;IAED,iBAAiB;;QACf,IAAI,CAAC,cAAc,CACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,wBAAwB,EAC9C,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,IAAG,wBAAwB,CAChD,CAAC;QAEF,IAAI,IAAI,CAAC,kBAAkB,GAAG,IAAI;YAAE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAEnE,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC;YAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;QAC/D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;QAE9C,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;YAAE,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QAClE,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;YAC9B,IAAI,CAAC,mBAAmB;gBACtB,MAAA,IAAI,CAAC,oBAAoB,mCAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC;SACtE;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,MAAM,YAAY,GAAW,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;kBACpD,KAAK,IAAI,CAAC,OAAO,EAAE;kBACnB,EAAE,CAAC;YACP,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,YAAY,EACZ,IAAI,CAAC,OAAO;kBACR,IAAI,CAAC,mBAAmB,IAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS;kBACjE,IAAI,CAAC,OAAO,CACjB,CAAC;YACF,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO;gBAC3B,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,kBAAkB,EAClB,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,YAAY,EAAE,GAAG,IAAI,CAAC,OAAO,CAC/D,CAAC;SACL;KACF;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,OAAO,CACR,CAAC;KACH;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjD,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAE7B,MAAM,aAAa,GAAG,OAAO,CAC3B,IAAI,CAAC,EAAE,EACP,QAAQ,CACiB,CAAC;YAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YACpE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAChE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAEhE,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;YACrC,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,QAAQ,EAAE,CAAC;YACjE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;SAC9B;KACF;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,MAAM,aAAa,GAAG,OAAO,CAC3B,IAAI,CAAC,EAAE,EACP,QAAQ,CACiB,CAAC;YAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;YACpE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAChE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SACjE;aAAM;YACL,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;SAC/B;KACF;IAGD,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;IAGD,cAAc,CAAC,EAAiB;QAC9B,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,QAAQ,EAAE,CAAC,GAAG;oBACZ,KAAK,KAAK;wBACR,EAAE,CAAC,cAAc,EAAE,CAAC;wBACpB,IAAI,CAAC,0BAA0B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;wBACxD,MAAM;oBACR,KAAK,QAAQ;wBACX,CAAC,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;wBACnC,EAAE,CAAC,wBAAwB,EAAE,CAAC;wBAC9B,MAAM;iBACT;aACF;iBAAM;gBACL,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE;oBACpB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,QAAQ,CAAC;oBACnC,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;iBACrC;aACF;SACF;KACF;IAID,WAAW,CAAC,EAAc;QACxB,QAAQ,EAAE,CAAC,IAAI;YACb,KAAK,YAAY;gBACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAClB,IAAI,CAAC,qBAAqB,EAAE,CAAC;iBAC9B;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,MAAM;YACR,KAAK,YAAY;gBACf,IAAI,IAAI,CAAC,WAAW,KAAK,WAAW,EAAE;oBACpC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;oBACtB,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;oBAC9B,IAAI,IAAI,CAAC,OAAO,EAAE;wBAChB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CACrC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,kBAAkB,CACxB,CAAC;wBACF,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAC5C,IAAI,CAAC,oBAAoB,EACzB,kCAAkC,CACnC,CAAC;qBACH;iBACF;gBACD,MAAM;SACT;KACF;;;;;IAOD,MAAM,UAAU;QACd,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CACrC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,kBAAkB,CACxB,CAAC;YACF,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAC5C,IAAI,CAAC,oBAAoB,EACzB,kCAAkC,CACnC,CAAC;YACF,OAAO,IAAI,CAAC;SACb;aAAM;YACL,MAAM,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC;YACrE,OAAO,QAAQ,CAAC,aAA4B,CAAC;SAC9C;KACF;IAWO,cAAc,CACpB,cAAuB,EACvB,cAAwB;QAExB,IAAI,cAAc,IAAI,cAAc,EAAE;YACpC,OAAO,CAAC,KAAK,CACX,gCAAgC,cAAc,GAAG,SAAS,GAAG,EAAE,GAC7D,cAAc,IAAI,cAAc,GAAG,OAAO,GAAG,EAC/C,GACE,cAAc,GAAG,SAAS,GAAG,EAC/B,+DAA+D,CAChE,CAAC;SACH;KACF;IAEO,0BAA0B,CAChC,WAAoB;QAEpB,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC5C,MAAM,MAAM,GACV,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEhE,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;YAC/C,OAAO,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;QAExC,IAAI,YAAoB,CAAC;QAEzB,OAAO,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK;YAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAAE,OAAO,KAAK,CAAC;YACrC,YAAY,GAAG,KAAK,CAAC;YACrB,OAAO,IAAI,CAAC;SACb,CAAC;cACE,IAAI,CAAC,mBAAmB,CAAC,YAAY,IAAI,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;cAC/D,OAAO,CAAC;KACb;IAEO,qBAAqB;QAC3B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACzC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;KAC1B;IAEO,QAAQ,CAAC,QAAqB;QACpC,OAAO,QAAQ,KAAK,IAAI,CAAC,EAAE;cACvB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa;cAClC,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC;KACzC;IAYD,MAAM;QACJ,MAAM,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,QAAQ,EACR,sBAAsB,GACvB,GAAG,IAAI,CAAC;QACT,QACE,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,iBAAiB,GAAG,CAAC,OAAO,EAAE,EACxC,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,EACpC,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,WAAK,KAAK,EAAC,WAAW,IACnB,OAAO,IAAI,OAAO,KACjB,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WACE,KAAK,EAAE;gBACL,CAAC,SAAS,GAAG,IAAI;gBACjB,CAAC,WAAW,OAAO,EAAE,GAAG,IAAI;aAC7B,GACI,EACN,OAAO,KAAK,SAAS,IACpB,YAAM,IAAI,EAAC,cAAc,GAAG,KAE5B,YACE,KAAK,EAAC,YAAY,EAClB,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,GAChC,CACT,CACG,CACP,EACD,WACE,KAAK,EAAE;gBACL,CAAC,eAAe,GAAG,IAAI;gBACvB,CAAC,SAAS,GACR,OAAO,KAAK,SAAS,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;aAChE,IAED,WAAK,KAAK,EAAC,eAAe,IACxB,qBAAe,OAAO,EAAC,gBAAgB,IACpC,OAAO,IAAI,cAAK,OAAO,CAAM,CAChB,EACf,OAAO,KACN,qBAAe,OAAO,EAAC,MAAM,IAC1B,OAAO,IAAI,aAAI,OAAO,CAAK,CACd,CACjB,CACG,EACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,KAC5B,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,EACL,CAAC,QAAQ,IACR,4BACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAC,MAAM,EACZ,UAAU,QACV,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAC,EAAE,GACQ,KAExB,iBACE,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,qBAAqB,CAAC,KAAK,gBAC3B,sBAAsB,GACvB,CACd,CACG,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","src/components/ic-toast/ic-toast.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-toast: z-index of toast\n */\n\n@media (prefers-reduced-motion: no-preference) {\n  :host {\n    animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n  }\n\n  :host(.hidden) {\n    animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n  }\n}\n\n:host {\n  --bottom-position: var(--ic-space-xl);\n\n  position: fixed;\n  bottom: var(--bottom-position);\n  left: 50%;\n  transform: translate(-50%);\n  z-index: var(--ic-z-index-toast);\n}\n\n:host(.ic-toast-hidden) {\n  display: none;\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.container {\n  max-width: 32.5rem;\n  min-width: 18rem;\n  box-shadow: var(--ic-elevation-overlay);\n  min-height: 3.5rem;\n  background-color: var(--ic-architectural-800);\n\n  --ic-typography-color: var(--ic-color-text-primary-dark);\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: var(--ic-border-radius);\n}\n\n.toast-icon-container {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  position: absolute;\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n  background-color: var(--ic-status-unknown-default);\n}\n\n.divider-info {\n  background-color: var(--ic-status-info-contrast);\n}\n\n.divider-warning {\n  background-color: var(--ic-status-warning-contrast);\n}\n\n.divider-error {\n  background-color: var(--ic-status-error-contrast);\n}\n\n.divider-success {\n  background-color: var(--ic-status-success-contrast);\n}\n\n.toast-icon,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n  fill: var(--ic-status-unknown-default);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n  fill: var(--ic-status-info-contrast);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n  fill: var(--ic-status-warning-contrast);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n  fill: var(--ic-status-error-contrast);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n  fill: var(--ic-status-success-contrast);\n}\n\n.toast-content {\n  margin-left: var(--ic-space-xs);\n  width: 100%;\n}\n\n.no-icon {\n  margin-left: var(--ic-space-md);\n}\n\n.toast-message {\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-action-container {\n  padding-bottom: var(--ic-space-md);\n}\n\nic-button {\n  padding: var(--ic-space-xs);\n}\n\nic-loading-indicator {\n  --outer-color: transparent;\n  --inner-color: var(--ic-action-light);\n}\n\n.toast-dismiss-timer {\n  padding: var(--ic-space-sm);\n}\n\n@media (max-width: 576px) {\n  :host {\n    --bottom-position: var(--ic-space-lg);\n\n    width: calc(100% - 2 * var(--ic-space-md));\n  }\n}\n\n@media (min-width: 993px) {\n  :host {\n    --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-border-hc);\n  }\n}\n\n@keyframes fadein {\n  from {\n    bottom: 0;\n    opacity: 0;\n  }\n\n  to {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeout {\n  from {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n\n  to {\n    bottom: 0;\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n  getSlot,\n  isPropDefined,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcActivationTypes,\n  IcStatusVariants,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n  tag: \"ic-toast\",\n  styleUrl: \"ic-toast.css\",\n  shadow: true,\n})\nexport class Toast {\n  private dismissTimeout: number;\n  private interactiveElements: ActionAreaElementTypes[] = [];\n  private neutralVariantLabel: string;\n  private timerRefreshInterval: number;\n  private focusInteractiveElement: boolean;\n  private shiftKeyPressed: boolean;\n\n  @Element() el: HTMLIcToastElement;\n\n  @State() isManual: boolean;\n  @State() timerProgress = 100;\n  @State() visible = false;\n\n  /**\n   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n   * (NOTE: Has a minimum value of `5000ms`)\n   */\n  @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n  /**\n   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n   */\n  @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n  /**\n   * How the toast will be dismissed. If manual will display a dismiss button.\n   */\n  @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n  @Watch(\"dismissMode\")\n  dismissModeChangeHandler(newValue: IcActivationTypes): void {\n    this.isManual = newValue === \"manual\";\n  }\n\n  /**\n   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\n\n  /**\n   * The variant of the toast being rendered\n   */\n  @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n  /**\n   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n  }\n\n  componentWillLoad(): void {\n    this.handleLongText(\n      this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n      this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n    );\n\n    if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n    if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n    this.isManual = this.dismissMode === \"manual\";\n\n    if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n    if (this.variant === \"neutral\") {\n      this.neutralVariantLabel =\n        this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n    }\n\n    if (this.isManual) {\n      const toastMessage: string = isPropDefined(this.message)\n        ? `. ${this.message}`\n        : \"\";\n      this.el.setAttribute(\n        \"aria-label\",\n        this.variant\n          ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n          : this.heading\n      );\n      (this.variant || this.message) &&\n        this.el.setAttribute(\n          \"aria-description\",\n          this.variant ? `${this.heading}${toastMessage}` : this.message\n        );\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Toast\"\n    );\n  }\n\n  componentDidUpdate(): void {\n    if (this.focusInteractiveElement && this.isManual) {\n      this.resetAutoDismissTimer();\n\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n\n      this.focusInteractiveElement = false;\n      this.findNextInteractiveElement(this.shiftKeyPressed).setFocus();\n      this.shiftKeyPressed = false;\n    }\n  }\n\n  @Watch(\"visible\")\n  watchVisibleHandler(): void {\n    if (this.visible) {\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n    } else {\n      this.interactiveElements = [];\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismiss(): void {\n    this.visible = false;\n    this.resetAutoDismissTimer();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.visible) {\n      if (this.isManual) {\n        switch (ev.key) {\n          case \"Tab\":\n            ev.preventDefault();\n            this.findNextInteractiveElement(ev.shiftKey).setFocus();\n            break;\n          case \"Escape\":\n            !ev.repeat && this.dismissAction();\n            ev.stopImmediatePropagation();\n            break;\n        }\n      } else {\n        if (ev.key === \"Tab\") {\n          this.shiftKeyPressed = ev.shiftKey;\n          this.focusInteractiveElement = true;\n        }\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  @Listen(\"mouseleave\")\n  handleTimer(ev: MouseEvent): void {\n    switch (ev.type) {\n      case \"mouseenter\":\n        if (!this.isManual) {\n          this.resetAutoDismissTimer();\n        }\n        this.isManual = true;\n        break;\n      case \"mouseleave\":\n        if (this.dismissMode === \"automatic\") {\n          this.isManual = false;\n          this.interactiveElements = [];\n          if (this.visible) {\n            this.dismissTimeout = window.setTimeout(\n              this.dismissAction,\n              this.autoDismissTimeout\n            );\n            this.timerRefreshInterval = window.setInterval(\n              this.handleProgressChange,\n              AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n            );\n          }\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Used to display the individual toast.\n   * @returns The element that previously had focus before the toast appeared\n   */\n  @Method()\n  async setVisible(): Promise<HTMLElement> {\n    if (!this.visible) this.visible = true;\n    if (!this.isManual) {\n      this.dismissTimeout = window.setTimeout(\n        this.dismissAction,\n        this.autoDismissTimeout\n      );\n      this.timerRefreshInterval = window.setInterval(\n        this.handleProgressChange,\n        AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n      );\n      return null;\n    } else {\n      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n      return document.activeElement as HTMLElement;\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private handleProgressChange = () => {\n    this.timerProgress -=\n      (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n  };\n\n  private handleLongText(\n    headingTooLong: boolean,\n    messageTooLong?: boolean\n  ): void {\n    if (messageTooLong || headingTooLong) {\n      console.error(\n        `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n          headingTooLong && messageTooLong ? \" and \" : \"\"\n        }${\n          messageTooLong ? \"message\" : \"\"\n        }. Refer to character limits specified in the prop description`\n      );\n    }\n  }\n\n  private findNextInteractiveElement(\n    isBackwards: boolean\n  ): ActionAreaElementTypes {\n    const firstEl = this.interactiveElements[0];\n    const lastEl =\n      this.interactiveElements[this.interactiveElements.length - 1];\n\n    if (this.isActive(isBackwards ? firstEl : lastEl))\n      return isBackwards ? lastEl : firstEl;\n\n    let currentIndex: number;\n\n    return this.interactiveElements.some((el, index) => {\n      if (!this.isActive(el)) return false;\n      currentIndex = index;\n      return true;\n    })\n      ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n      : firstEl;\n  }\n\n  private resetAutoDismissTimer(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n    this.timerProgress = 100;\n  }\n\n  private isActive(targetEl: HTMLElement): boolean {\n    return targetEl === this.el\n      ? !!this.el.shadowRoot.activeElement\n      : document.activeElement === targetEl;\n  }\n\n  private onFocus = (): void => {\n    if (this.focusInteractiveElement) {\n      this.isManual = true;\n    }\n  };\n\n  private onBlur = (): void => {\n    this.handleTimer({ type: \"mouseleave\" } as MouseEvent);\n  };\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      visible,\n      isManual,\n      dismissButtonAriaLabel,\n    } = this;\n    return (\n      <Host\n        class={{ [\"ic-toast-hidden\"]: !visible }}\n        role={isManual ? \"dialog\" : \"status\"}\n        tabindex=\"0\"\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        <div class=\"container\">\n          {variant && visible && (\n            <div class=\"toast-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                <slot name=\"neutral-icon\" />\n              ) : (\n                <span\n                  class=\"toast-icon\"\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n          )}\n          <div\n            class={{\n              [\"toast-content\"]: true,\n              [\"no-icon\"]:\n                variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n            }}\n          >\n            <div class=\"toast-message\">\n              <ic-typography variant=\"subtitle-large\">\n                {visible && <h5>{heading}</h5>}\n              </ic-typography>\n              {message && (\n                <ic-typography variant=\"body\">\n                  {visible && <p>{message}</p>}\n                </ic-typography>\n              )}\n            </div>\n            {isSlotUsed(this.el, \"action\") && (\n              <div class=\"toast-action-container\">\n                <slot name=\"action\" />\n              </div>\n            )}\n          </div>\n          {!isManual ? (\n            <ic-loading-indicator\n              class=\"toast-dismiss-timer\"\n              theme=\"dark\"\n              monochrome\n              size=\"icon\"\n              progress={this.timerProgress}\n              description=\"\"\n            ></ic-loading-indicator>\n          ) : (\n            <ic-button\n              id=\"dismiss-button\"\n              innerHTML={closeIcon}\n              onClick={this.dismissAction}\n              variant=\"icon\"\n              appearance={IcThemeForegroundEnum.Light}\n              aria-label={dismissButtonAriaLabel}\n            ></ic-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-toast.js","mappings":"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","names":[],"sources":["src/components/ic-toast/ic-toast.css?tag=ic-toast&encapsulation=shadow","src/components/ic-toast/ic-toast.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-toast: z-index of toast\n */\n\n@media (prefers-reduced-motion: no-preference) {\n  :host {\n    animation: fadein var(--ic-transition-duration-slow) ease-in-out;\n  }\n\n  :host(.hidden) {\n    animation: fadeout var(--ic-transition-duration-slow) ease-in-out;\n  }\n}\n\n:host {\n  --bottom-position: var(--ic-space-xl);\n\n  position: fixed;\n  bottom: var(--bottom-position);\n  left: 50%;\n  transform: translate(-50%);\n  z-index: var(--ic-z-index-toast);\n}\n\n:host(.ic-toast-hidden) {\n  display: none;\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.container {\n  max-width: 32.5rem;\n  min-width: 18rem;\n  box-shadow: var(--ic-elevation-overlay);\n  min-height: 3.5rem;\n  background-color: var(--ic-toast-background);\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-radius: var(--ic-border-radius);\n}\n\n.toast-icon-container {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.divider {\n  height: 100%;\n  width: var(--ic-space-xs);\n  position: absolute;\n  border-radius: var(--ic-space-xxxs) 0 0 var(--ic-space-xxxs);\n}\n\n.divider-neutral {\n  background-color: var(--ic-toast-status-neutral);\n}\n\n.divider-info {\n  background-color: var(--ic-toast-status-info);\n}\n\n.divider-warning {\n  background-color: var(--ic-toast-status-warning);\n}\n\n.divider-error {\n  background-color: var(--ic-toast-status-error);\n}\n\n.divider-success {\n  background-color: var(--ic-toast-status-success);\n}\n\n.toast-icon,\n::slotted(svg) {\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  margin-left: var(--ic-space-md);\n}\n\n:host([variant=\"neutral\"]) .toast-icon svg,\n::slotted(svg) {\n  fill: var(--ic-toast-icon-neutral);\n}\n\n:host([variant=\"info\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-info);\n}\n\n:host([variant=\"warning\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-warning);\n}\n\n:host([variant=\"error\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-error);\n}\n\n:host([variant=\"success\"]) .toast-icon svg {\n  fill: var(--ic-toast-icon-success);\n}\n\n.toast-content {\n  margin-left: var(--ic-space-xs);\n  width: 100%;\n}\n\n.no-icon {\n  margin-left: var(--ic-space-md);\n}\n\n.toast-text {\n  padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n.toast-heading {\n  --ic-typography-color: var(--ic-toast-title);\n}\n\n.toast-message {\n  --ic-typography-color: var(--ic-toast-description);\n}\n\n.toast-action-container {\n  padding-bottom: var(--ic-space-md);\n}\n\n#dismiss-button {\n  padding: var(--ic-space-xs);\n}\n\n#dismiss-button > svg {\n  color: var(--ic-toast-dismiss-button);\n}\n\nic-loading-indicator {\n  --outer-color: transparent;\n  --inner-color: var(--ic-action-light);\n}\n\n.toast-dismiss-timer {\n  padding: var(--ic-space-sm);\n}\n\n@media (max-width: 576px) {\n  :host {\n    --bottom-position: var(--ic-space-lg);\n\n    width: calc(100% - 2 * var(--ic-space-md));\n  }\n}\n\n@media (min-width: 993px) {\n  :host {\n    --bottom-position: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  }\n}\n\n@media (forced-colors: active) {\n  .container {\n    border: var(--ic-border-hc);\n  }\n}\n\n@keyframes fadein {\n  from {\n    bottom: 0;\n    opacity: 0;\n  }\n\n  to {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeout {\n  from {\n    bottom: var(--bottom-position);\n    opacity: 1;\n  }\n\n  to {\n    bottom: 0;\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n  getSlot,\n  isPropDefined,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcActivationTypes, IcStatusVariants } from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n  tag: \"ic-toast\",\n  styleUrl: \"ic-toast.css\",\n  shadow: true,\n})\nexport class Toast {\n  private dismissTimeout: number;\n  private interactiveElements: ActionAreaElementTypes[] = [];\n  private neutralVariantLabel: string;\n  private timerRefreshInterval: number;\n  private focusInteractiveElement: boolean;\n  private shiftKeyPressed: boolean;\n\n  @Element() el: HTMLIcToastElement;\n\n  @State() isManual: boolean;\n  @State() timerProgress = 100;\n  @State() visible = false;\n\n  /**\n   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n   * (NOTE: Has a minimum value of `5000ms`)\n   */\n  @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n  /**\n   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n   */\n  @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n  /**\n   * How the toast will be dismissed. If manual will display a dismiss button.\n   */\n  @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n  @Watch(\"dismissMode\")\n  dismissModeChangeHandler(newValue: IcActivationTypes): void {\n    this.isManual = newValue === \"manual\";\n  }\n\n  /**\n   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\n\n  /**\n   * The variant of the toast being rendered\n   */\n  @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n  /**\n   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n  }\n\n  componentWillLoad(): void {\n    this.handleLongText(\n      this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n      this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n    );\n\n    if (this.autoDismissTimeout < 5000) this.autoDismissTimeout = 5000;\n\n    if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n    this.isManual = this.dismissMode === \"manual\";\n\n    if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n    if (this.variant === \"neutral\") {\n      this.neutralVariantLabel =\n        this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n    }\n\n    if (this.isManual) {\n      const toastMessage: string = isPropDefined(this.message)\n        ? `. ${this.message}`\n        : \"\";\n      this.el.setAttribute(\n        \"aria-label\",\n        this.variant\n          ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n          : this.heading\n      );\n      (this.variant || this.message) &&\n        this.el.setAttribute(\n          \"aria-description\",\n          this.variant ? `${this.heading}${toastMessage}` : this.message\n        );\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Toast\"\n    );\n  }\n\n  componentDidUpdate(): void {\n    if (this.focusInteractiveElement && this.isManual) {\n      this.resetAutoDismissTimer();\n\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n\n      this.focusInteractiveElement = false;\n      this.findNextInteractiveElement(this.shiftKeyPressed).setFocus();\n      this.shiftKeyPressed = false;\n    }\n  }\n\n  @Watch(\"visible\")\n  watchVisibleHandler(): void {\n    if (this.visible) {\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n    } else {\n      this.interactiveElements = [];\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismiss(): void {\n    this.visible = false;\n    this.resetAutoDismissTimer();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.visible) {\n      if (this.isManual) {\n        switch (ev.key) {\n          case \"Tab\":\n            ev.preventDefault();\n            this.findNextInteractiveElement(ev.shiftKey).setFocus();\n            break;\n          case \"Escape\":\n            !ev.repeat && this.dismissAction();\n            ev.stopImmediatePropagation();\n            break;\n        }\n      } else {\n        if (ev.key === \"Tab\") {\n          this.shiftKeyPressed = ev.shiftKey;\n          this.focusInteractiveElement = true;\n        }\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  @Listen(\"mouseleave\")\n  handleTimer(ev: MouseEvent): void {\n    switch (ev.type) {\n      case \"mouseenter\":\n        if (!this.isManual) {\n          this.resetAutoDismissTimer();\n        }\n        this.isManual = true;\n        break;\n      case \"mouseleave\":\n        if (this.dismissMode === \"automatic\") {\n          this.isManual = false;\n          this.interactiveElements = [];\n          if (this.visible) {\n            this.dismissTimeout = window.setTimeout(\n              this.dismissAction,\n              this.autoDismissTimeout\n            );\n            this.timerRefreshInterval = window.setInterval(\n              this.handleProgressChange,\n              AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n            );\n          }\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Used to display the individual toast.\n   * @returns The element that previously had focus before the toast appeared\n   */\n  @Method()\n  async setVisible(): Promise<HTMLElement> {\n    if (!this.visible) this.visible = true;\n    if (!this.isManual) {\n      this.dismissTimeout = window.setTimeout(\n        this.dismissAction,\n        this.autoDismissTimeout\n      );\n      this.timerRefreshInterval = window.setInterval(\n        this.handleProgressChange,\n        AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n      );\n      return null;\n    } else {\n      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n      return document.activeElement as HTMLElement;\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private handleProgressChange = () => {\n    this.timerProgress -=\n      (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout) * 100;\n  };\n\n  private handleLongText(\n    headingTooLong: boolean,\n    messageTooLong?: boolean\n  ): void {\n    if (messageTooLong || headingTooLong) {\n      console.error(\n        `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n          headingTooLong && messageTooLong ? \" and \" : \"\"\n        }${\n          messageTooLong ? \"message\" : \"\"\n        }. Refer to character limits specified in the prop description`\n      );\n    }\n  }\n\n  private findNextInteractiveElement(\n    isBackwards: boolean\n  ): ActionAreaElementTypes {\n    const firstEl = this.interactiveElements[0];\n    const lastEl =\n      this.interactiveElements[this.interactiveElements.length - 1];\n\n    if (this.isActive(isBackwards ? firstEl : lastEl))\n      return isBackwards ? lastEl : firstEl;\n\n    let currentIndex: number;\n\n    return this.interactiveElements.some((el, index) => {\n      if (!this.isActive(el)) return false;\n      currentIndex = index;\n      return true;\n    })\n      ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n      : firstEl;\n  }\n\n  private resetAutoDismissTimer(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n    this.timerProgress = 100;\n  }\n\n  private isActive(targetEl: HTMLElement): boolean {\n    return targetEl === this.el\n      ? !!this.el.shadowRoot.activeElement\n      : document.activeElement === targetEl;\n  }\n\n  private onFocus = (): void => {\n    if (this.focusInteractiveElement) {\n      this.isManual = true;\n    }\n  };\n\n  private onBlur = (): void => {\n    this.handleTimer({ type: \"mouseleave\" } as MouseEvent);\n  };\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      visible,\n      isManual,\n      dismissButtonAriaLabel,\n    } = this;\n    return (\n      <Host\n        class={{ [\"ic-toast-hidden\"]: !visible }}\n        role={isManual ? \"dialog\" : \"status\"}\n        tabindex=\"0\"\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      >\n        <div class=\"container\">\n          {variant && visible && (\n            <div class=\"toast-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                <slot name=\"neutral-icon\" />\n              ) : (\n                <span\n                  class=\"toast-icon\"\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n          )}\n          <div\n            class={{\n              [\"toast-content\"]: true,\n              [\"no-icon\"]:\n                variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n            }}\n          >\n            <div class=\"toast-text\">\n              <ic-typography variant=\"subtitle-large\" class=\"toast-heading\">\n                {visible && <h5>{heading}</h5>}\n              </ic-typography>\n              {message && (\n                <ic-typography variant=\"body\" class=\"toast-message\">\n                  {visible && <p>{message}</p>}\n                </ic-typography>\n              )}\n            </div>\n            {isSlotUsed(this.el, \"action\") && (\n              <div class=\"toast-action-container\">\n                <slot name=\"action\" />\n              </div>\n            )}\n          </div>\n          {!isManual ? (\n            <ic-loading-indicator\n              class=\"toast-dismiss-timer\"\n              theme=\"dark\"\n              monochrome\n              size=\"icon\"\n              progress={this.timerProgress}\n              description=\"\"\n            ></ic-loading-indicator>\n          ) : (\n            <ic-button\n              id=\"dismiss-button\"\n              innerHTML={closeIcon}\n              onClick={this.dismissAction}\n              variant=\"icon\"\n              aria-label={dismissButtonAriaLabel}\n            ></ic-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-toggle-button-group.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const icToggleButtonGroupCss = "/*! 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}:root{display:block}:host{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;min-width:-moz-min-content;min-width:min-content;border:var(--ic-border-width) solid var(--ic-action-default);border-radius:var(--ic-border-radius)}:host(.ic-toggle-button-group-full-width){width:100%;max-width:100%}:host(.ic-toggle-button-group-loading){min-width:-moz-max-content;min-width:max-content}:host(:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}::slotted(ic-toggle-button){flex-grow:1;width:-moz-min-content;width:min-content;--toggle-button-border:none}::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid var(--ic-action-default)}:host(.ic-toggle-button-group-disabled){border:var(--ic-border-disabled);pointer-events:none}:host(.ic-toggle-button-group-disabled) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-disabled)}:host(.ic-toggle-button-group-dark){border:var(--ic-border-width) solid var(--ic-action-dark)}:host(.ic-toggle-button-group-dark) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid var(--ic-action-dark)}:host(.ic-toggle-button-group-light) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid var(--ic-action-light)}:host(.ic-toggle-button-group-light){border:var(--ic-border-width) solid var(--ic-action-light)}";
+const icToggleButtonGroupCss = "/*! 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}:root{display:block}:host{display:flex;flex-direction:row;width:-moz-fit-content;width:fit-content;min-width:-moz-min-content;min-width:min-content;border:var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);border-radius:var(--ic-border-radius)}:host(.ic-toggle-button-group-full-width){width:100%;max-width:100%}:host(.ic-toggle-button-group-loading){min-width:-moz-max-content;min-width:max-content}:host(:focus){box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-transition-duration-fast);outline:none}::slotted(ic-toggle-button){flex-grow:1;width:-moz-min-content;width:min-content;--toggle-button-border:none !important;--toggle-button-border-hover:none !important;--toggle-button-border-active:none !important}::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border)}:host(.ic-toggle-button-group-disabled){border:var(--ic-space-1px) dashed\n    var(--ic-toggle-button-unselected-border-disabled);pointer-events:none}:host(.ic-toggle-button-group-disabled) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-space-1px) dashed\n    var(--ic-toggle-button-unselected-border-disabled)}:host(.ic-toggle-button-group-monochrome){border:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome){border:var(--ic-border-width) dashed\n    var(--ic-toggle-button-unselected-border-disabled-monochrome)}:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) ::slotted(ic-toggle-button:not(:last-of-type)){border-right:var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-disabled-monochrome)}";
 
 const TOGGLE_GROUP = "IC-TOGGLE-BUTTON-GROUP";
 const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGroup extends HTMLElement {
@@ -87,16 +87,32 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
             shift: false,
         };
         this.accessibleLabel = "Toggle button group";
-        this.appearance = "default";
         this.disabled = false;
         this.fullWidth = false;
         this.iconPlacement = undefined;
         this.loading = false;
+        this.monochrome = false;
         this.selectMethod = "manual";
         this.selectType = "single";
         this.size = "medium";
+        this.theme = "inherit";
         this.variant = "default";
     }
+    watchDisabledHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.disabled = this.disabled;
+        });
+    }
+    watchMonochromeHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.monochrome = this.monochrome;
+        });
+    }
+    watchThemeHandler() {
+        this.getAllToggleButtons().forEach((el) => {
+            el.theme = this.theme;
+        });
+    }
     selectHandler(ev, tabTarget) {
         const allToggles = this.getAllToggleButtons();
         let clickedToggle = ev.target;
@@ -138,7 +154,8 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
             el.loading = this.loading;
             el.iconPlacement = this.iconPlacement;
             el.disabled ? null : (el.disabled = this.disabled);
-            el.appearance = this.appearance;
+            el.theme = this.theme;
+            el.monochrome = this.monochrome;
             el.variant = this.variant;
             el.fullWidth = this.fullWidth;
             el.id = i.toString();
@@ -150,7 +167,7 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
         });
     }
     disconnectedCallback() {
-        document.removeEventListener("keydown", this.keyListener);
+        document === null || document === void 0 ? void 0 : document.removeEventListener("keydown", this.keyListener);
     }
     // trigger selectHandler when unable to add 'target'
     proxySelectHandler(toggle) {
@@ -167,27 +184,39 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
     }
     render() {
         return (h(Host, { role: "group", "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : "false", tabindex: 0, class: {
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
                 ["ic-toggle-button-group-full-width"]: this.fullWidth,
                 ["ic-toggle-button-group-loading"]: this.loading,
                 ["ic-toggle-button-group-disabled"]: this.disabled,
-                [`ic-toggle-button-group-${this.appearance}`]: true,
+                [`ic-toggle-button-group-monochrome`]: this.monochrome,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             }, onFocus: this.handleHostFocus }, h("slot", null)));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "monochrome": ["watchMonochromeHandler"],
+        "theme": ["watchThemeHandler"]
+    }; }
     static get style() { return icToggleButtonGroupCss; }
 }, [1, "ic-toggle-button-group", {
         "accessibleLabel": [1, "accessible-label"],
-        "appearance": [1],
         "disabled": [4],
         "fullWidth": [4, "full-width"],
         "iconPlacement": [1, "icon-placement"],
         "loading": [4],
+        "monochrome": [4],
         "selectMethod": [1025, "select-method"],
         "selectType": [1, "select-type"],
         "size": [1],
+        "theme": [1],
         "variant": [513],
         "lastKeyPressed": [32]
-    }, [[0, "icToggleChecked", "selectHandler"]]]);
+    }, [[0, "icToggleChecked", "selectHandler"]], {
+        "disabled": ["watchDisabledHandler"],
+        "monochrome": ["watchMonochromeHandler"],
+        "theme": ["watchThemeHandler"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/ic-toggle-button-group.js.map

@@ -1 +1 @@
-{"file":"ic-toggle-button-group.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n  display: block;\n}\n\n:host {\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: min-content;\n  border: var(--ic-border-width) solid var(--ic-action-default);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n  width: 100%;\n  max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n  min-width: max-content;\n}\n\n:host(:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n  outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n  flex-grow: 1;\n  width: min-content;\n\n  --toggle-button-border: none;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-border-width) solid var(--ic-action-default);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n  border: var(--ic-border-disabled);\n  pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n  ::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-border-disabled);\n}\n\n/* DARK */\n:host(.ic-toggle-button-group-dark) {\n  border: var(--ic-border-width) solid var(--ic-action-dark);\n}\n\n:host(.ic-toggle-button-group-dark)\n  ::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-border-width) solid var(--ic-action-dark);\n}\n\n/* LIGHT */\n:host(.ic-toggle-button-group-light)\n  ::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-border-width) solid var(--ic-action-light);\n}\n\n:host(.ic-toggle-button-group-light) {\n  border: var(--ic-border-width) solid var(--ic-action-light);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n} from \"@stencil/core\";\nimport {\n  IcSizes,\n  IcThemeForeground,\n  IcSelectTypes,\n  IcSelectMethodTypes,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\n\ninterface lastKey {\n  key: string | null;\n  shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n  tag: \"ic-toggle-button-group\",\n  styleUrl: \"ic-toggle-button-group.css\",\n  shadow: true,\n})\nexport class ToggleButtonGroup {\n  @Element() el: HTMLIcToggleButtonGroupElement;\n\n  @State() lastKeyPressed: lastKey = {\n    key: null,\n    shift: false,\n  };\n\n  /**\n   * The accessible label of the toggle button group component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n  /**\n   * The appearance of the toggle button group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the toggle button group will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icons in relation to the toggle button labels.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * If `true`, the toggle button group will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n   */\n  @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n  /**\n   * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n   */\n  @Prop() selectType?: IcSelectTypes = \"single\";\n\n  /**\n   * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when a toggle button is selected.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icToggleChecked\")\n  selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n    const allToggles = this.getAllToggleButtons();\n    let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n    // tabTarget used in proxySelectHandler\n    tabTarget && tabTarget.focus();\n    if (this.selectType === \"single\") {\n      if (!clickedToggle) {\n        clickedToggle = tabTarget;\n      }\n      allToggles.forEach((el) => {\n        if (el.id !== clickedToggle.id && el.checked) {\n          el.checked = false;\n        }\n      });\n\n      this.icChange.emit({\n        checked: ev.detail.checked,\n        selectedOption: clickedToggle,\n      });\n    } else {\n      const toggledOptions = this.getAllToggleButtons().filter(\n        (el) => el.checked && !el.disabled\n      );\n\n      this.icChange.emit({\n        checked: toggledOptions.map((opt) => opt.checked),\n        toggledOptions: toggledOptions.map((opt) => ({\n          toggleButton: opt,\n        })),\n        selectedOption: clickedToggle,\n      });\n    }\n  }\n\n  componentWillLoad(): void {\n    this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n    this.selectMethod === \"auto\" && this.selectType === \"single\";\n    document.addEventListener(\"keydown\", this.keyListener);\n  }\n\n  componentDidLoad(): void {\n    this.getAllToggleButtons().forEach((el, i) => {\n      this.setSlottedAria(el);\n      el.size = this.size;\n      el.loading = this.loading;\n      el.iconPlacement = this.iconPlacement;\n      el.disabled ? null : (el.disabled = this.disabled);\n      el.appearance = this.appearance;\n      el.variant = this.variant;\n      el.fullWidth = this.fullWidth;\n      el.id = i.toString();\n      el.tabIndex = -1;\n      el.addEventListener(\"keydown\", (ev) => {\n        this.handleKeyDown(ev);\n      });\n      el.classList.add(\"expand-toggle-group-child\");\n    });\n  }\n\n  disconnectedCallback(): void {\n    document.removeEventListener(\"keydown\", this.keyListener);\n  }\n\n  private keyListener = (ev: KeyboardEvent) => {\n    this.lastKeyPressed = {\n      key: ev.key,\n      shift: ev.shiftKey,\n    };\n  };\n\n  private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n    const btn = el.shadowRoot\n      .querySelector(\"ic-button\")\n      .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n    let aria = btn.getAttribute(\"aria-label\");\n    aria += \", \";\n    aria += this.accessibleLabel;\n    btn.setAttribute(\"aria-label\", aria);\n  };\n\n  private handleHostFocus = (ev: FocusEvent): void => {\n    if (this.loading || this.disabled) {\n      return null;\n    }\n    const el = ev.target as HTMLIcToggleButtonGroupElement;\n    const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n    const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n    if (\n      ((toggleButtons.every((el) => !el.checked) ||\n        this.selectType !== \"single\") &&\n        this.lastKeyPressed.shift === false) ||\n      (toggleButtons.every((el) => !el.checked) &&\n        this.lastKeyPressed.shift === true &&\n        relEl.tagName == TOGGLE_GROUP)\n    ) {\n      toggleButtons[0].focus();\n    } else if (\n      this.lastKeyPressed.shift === false ||\n      (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n    ) {\n      // if checked is true and selectMethod is \"single\", focus that toggle\n      const toggledButton = toggleButtons.filter((el) => el.checked);\n      toggledButton[0].focus();\n    }\n  };\n\n  // trigger selectHandler when unable to add 'target'\n  private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n    toggle.checked = true;\n    const customEv = new CustomEvent(\"icToggleChecked\", {\n      detail: {\n        checked: toggle.checked,\n      },\n    });\n    this.selectHandler(customEv, toggle);\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const focussedChild = toggleButtonOptions.indexOf(\n      toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, true)\n            ].focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[\n                this.getNextItemToSelect(focussedChild, false)\n              ]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, false)\n            ].focus();\n        break;\n      case \"Tab\":\n        break;\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const numToggles = toggleButtonOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n    if (nextItem < 0) {\n      nextItem = numToggles;\n    } else if (nextItem > numToggles) {\n      nextItem = 0;\n    }\n\n    if (toggleButtonOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n    return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"group\"\n        aria-label={this.accessibleLabel}\n        aria-disabled={this.disabled ? \"true\" : \"false\"}\n        tabindex={0}\n        class={{\n          [\"ic-toggle-button-group-full-width\"]: this.fullWidth,\n          [\"ic-toggle-button-group-loading\"]: this.loading,\n          [\"ic-toggle-button-group-disabled\"]: this.disabled,\n          [`ic-toggle-button-group-${this.appearance}`]: true,\n        }}\n        onFocus={this.handleHostFocus}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-toggle-button-group.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button-group/ic-toggle-button-group.css?tag=ic-toggle-button-group&encapsulation=shadow","src/components/ic-toggle-button-group/ic-toggle-button-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* PARENT HOST */\n\n:root {\n  display: block;\n}\n\n:host {\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: min-content;\n  border: var(--ic-border-width) solid var(--ic-toggle-button-unselected-border);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.ic-toggle-button-group-full-width) {\n  width: 100%;\n  max-width: 100%;\n}\n\n:host(.ic-toggle-button-group-loading) {\n  min-width: max-content;\n}\n\n:host(:focus) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-transition-duration-fast);\n  outline: none;\n}\n\n/* CHILDREN SLOTTED */\n\n::slotted(ic-toggle-button) {\n  flex-grow: 1;\n  width: min-content;\n\n  --toggle-button-border: none !important;\n  --toggle-button-border-hover: none !important;\n  --toggle-button-border-active: none !important;\n}\n\n::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border);\n}\n\n/* DISABLED */\n:host(.ic-toggle-button-group-disabled) {\n  border: var(--ic-space-1px) dashed\n    var(--ic-toggle-button-unselected-border-disabled);\n  pointer-events: none;\n}\n\n:host(.ic-toggle-button-group-disabled)\n  ::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-space-1px) dashed\n    var(--ic-toggle-button-unselected-border-disabled);\n}\n\n:host(.ic-toggle-button-group-monochrome) {\n  border: var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-monochrome)\n  ::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome) {\n  border: var(--ic-border-width) dashed\n    var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n\n:host(.ic-toggle-button-group-disabled.ic-toggle-button-group-monochrome)\n  ::slotted(ic-toggle-button:not(:last-of-type)) {\n  border-right: var(--ic-border-width) solid\n    var(--ic-toggle-button-unselected-border-disabled-monochrome);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcSizes,\n  IcSelectTypes,\n  IcSelectMethodTypes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-toggle-button-group.types\";\n\ninterface lastKey {\n  key: string | null;\n  shift: boolean;\n}\n\nconst TOGGLE_GROUP = \"IC-TOGGLE-BUTTON-GROUP\";\n\n@Component({\n  tag: \"ic-toggle-button-group\",\n  styleUrl: \"ic-toggle-button-group.css\",\n  shadow: true,\n})\nexport class ToggleButtonGroup {\n  @Element() el: HTMLIcToggleButtonGroupElement;\n\n  @State() lastKeyPressed: lastKey = {\n    key: null,\n    shift: false,\n  };\n\n  /**\n   * The accessible label of the toggle button group component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string = \"Toggle button group\";\n\n  /**\n   * If `true`, the toggle button group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    this.getAllToggleButtons().forEach((el) => {\n      el.disabled = this.disabled;\n    });\n  }\n\n  /**\n   * If `true`, the toggle button group will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icons in relation to the toggle button labels.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * If `true`, the toggle button group will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * If `true`, the toggle button group will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.getAllToggleButtons().forEach((el) => {\n      el.monochrome = this.monochrome;\n    });\n  }\n\n  /**\n   * If `auto`, controls are toggled automatically when navigated to. If `manual`, the controls must be actioned to change their toggled state. The value of this prop is ignored if `selectType` is set to`multi`.\n   */\n  @Prop({ mutable: true }) selectMethod?: IcSelectMethodTypes = \"manual\";\n\n  /**\n   * Sets whether single or multiple options can be toggled. If `multi`, then the `selectMethod` is always `manual`.\n   */\n  @Prop() selectType?: IcSelectTypes = \"single\";\n\n  /**\n   * The size of the toggle buttons to be displayed. This does not affect the font size of the accessible label.\n   */\n  @Prop() size?: IcSizes = \"medium\";\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.getAllToggleButtons().forEach((el) => {\n      el.theme = this.theme;\n    });\n  }\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when a toggle button is selected.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icToggleChecked\")\n  selectHandler(ev: CustomEvent, tabTarget?: HTMLIcToggleButtonElement): void {\n    const allToggles = this.getAllToggleButtons();\n    let clickedToggle = ev.target as HTMLIcToggleButtonElement;\n    // tabTarget used in proxySelectHandler\n    tabTarget && tabTarget.focus();\n    if (this.selectType === \"single\") {\n      if (!clickedToggle) {\n        clickedToggle = tabTarget;\n      }\n      allToggles.forEach((el) => {\n        if (el.id !== clickedToggle.id && el.checked) {\n          el.checked = false;\n        }\n      });\n\n      this.icChange.emit({\n        checked: ev.detail.checked,\n        selectedOption: clickedToggle,\n      });\n    } else {\n      const toggledOptions = this.getAllToggleButtons().filter(\n        (el) => el.checked && !el.disabled\n      );\n\n      this.icChange.emit({\n        checked: toggledOptions.map((opt) => opt.checked),\n        toggledOptions: toggledOptions.map((opt) => ({\n          toggleButton: opt,\n        })),\n        selectedOption: clickedToggle,\n      });\n    }\n  }\n\n  componentWillLoad(): void {\n    this.selectType === \"multi\" && (this.selectMethod = \"manual\");\n    this.selectMethod === \"auto\" && this.selectType === \"single\";\n    document.addEventListener(\"keydown\", this.keyListener);\n  }\n\n  componentDidLoad(): void {\n    this.getAllToggleButtons().forEach((el, i) => {\n      this.setSlottedAria(el);\n      el.size = this.size;\n      el.loading = this.loading;\n      el.iconPlacement = this.iconPlacement;\n      el.disabled ? null : (el.disabled = this.disabled);\n      el.theme = this.theme;\n      el.monochrome = this.monochrome;\n      el.variant = this.variant;\n      el.fullWidth = this.fullWidth;\n      el.id = i.toString();\n      el.tabIndex = -1;\n      el.addEventListener(\"keydown\", (ev) => {\n        this.handleKeyDown(ev);\n      });\n      el.classList.add(\"expand-toggle-group-child\");\n    });\n  }\n\n  disconnectedCallback(): void {\n    document?.removeEventListener(\"keydown\", this.keyListener);\n  }\n\n  private keyListener = (ev: KeyboardEvent) => {\n    this.lastKeyPressed = {\n      key: ev.key,\n      shift: ev.shiftKey,\n    };\n  };\n\n  private setSlottedAria = (el: HTMLIcToggleButtonElement) => {\n    const btn = el.shadowRoot\n      .querySelector(\"ic-button\")\n      .shadowRoot.querySelector(\"button\") as HTMLButtonElement;\n    let aria = btn.getAttribute(\"aria-label\");\n    aria += \", \";\n    aria += this.accessibleLabel;\n    btn.setAttribute(\"aria-label\", aria);\n  };\n\n  private handleHostFocus = (ev: FocusEvent): void => {\n    if (this.loading || this.disabled) {\n      return null;\n    }\n    const el = ev.target as HTMLIcToggleButtonGroupElement;\n    const relEl = ev.relatedTarget as HTMLIcToggleButtonElement;\n    const toggleButtons = Array.from(el.querySelectorAll(\"ic-toggle-button\"));\n    if (\n      ((toggleButtons.every((el) => !el.checked) ||\n        this.selectType !== \"single\") &&\n        this.lastKeyPressed.shift === false) ||\n      (toggleButtons.every((el) => !el.checked) &&\n        this.lastKeyPressed.shift === true &&\n        relEl.tagName == TOGGLE_GROUP)\n    ) {\n      toggleButtons[0].focus();\n    } else if (\n      this.lastKeyPressed.shift === false ||\n      (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)\n    ) {\n      // if checked is true and selectMethod is \"single\", focus that toggle\n      const toggledButton = toggleButtons.filter((el) => el.checked);\n      toggledButton[0].focus();\n    }\n  };\n\n  // trigger selectHandler when unable to add 'target'\n  private proxySelectHandler(toggle: HTMLIcToggleButtonElement): void {\n    toggle.checked = true;\n    const customEv = new CustomEvent(\"icToggleChecked\", {\n      detail: {\n        checked: toggle.checked,\n      },\n    });\n    this.selectHandler(customEv, toggle);\n  }\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const focussedChild = toggleButtonOptions.indexOf(\n      toggleButtonOptions.filter((el) => el === document.activeElement)[0]\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[this.getNextItemToSelect(focussedChild, true)]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, true)\n            ].focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        this.selectMethod === \"auto\"\n          ? this.proxySelectHandler(\n              toggleButtonOptions[\n                this.getNextItemToSelect(focussedChild, false)\n              ]\n            )\n          : toggleButtonOptions[\n              this.getNextItemToSelect(focussedChild, false)\n            ].focus();\n        break;\n      case \"Tab\":\n        break;\n    }\n  };\n\n  private getNextItemToSelect = (\n    currentItem: number,\n    movingDown: boolean\n  ): number => {\n    const toggleButtonOptions = this.getAllToggleButtons();\n    const numToggles = toggleButtonOptions.length - 1;\n\n    if (currentItem < 1) {\n      currentItem = 0;\n    }\n\n    let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n    if (nextItem < 0) {\n      nextItem = numToggles;\n    } else if (nextItem > numToggles) {\n      nextItem = 0;\n    }\n\n    if (toggleButtonOptions[nextItem].disabled) {\n      nextItem = this.getNextItemToSelect(nextItem, movingDown);\n    }\n\n    return nextItem;\n  };\n\n  private getAllToggleButtons(): HTMLIcToggleButtonElement[] {\n    return Array.from(this.el.querySelectorAll(\"ic-toggle-button\"));\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"group\"\n        aria-label={this.accessibleLabel}\n        aria-disabled={this.disabled ? \"true\" : \"false\"}\n        tabindex={0}\n        class={{\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          [\"ic-toggle-button-group-full-width\"]: this.fullWidth,\n          [\"ic-toggle-button-group-loading\"]: this.loading,\n          [\"ic-toggle-button-group-disabled\"]: this.disabled,\n          [`ic-toggle-button-group-monochrome`]: this.monochrome,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n        onFocus={this.handleHostFocus}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-toggle-button.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
-const icToggleButtonCss = "/*! 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{--button-border:var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-default)\n  )}:host(.ic-toggle-button-dark){--button-border:var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-dark)\n  )}:host(.ic-toggle-button-light){--button-border:var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-light)\n  )}:host(.ic-toggle-button-disabled){--button-border:var(--toggle-button-border, var(--ic-border-disabled))}:host(.expand-toggle-group-child) ::part(button){width:100%;min-height:inherit;white-space:inherit;height:inherit}:host ic-button{--icon-width:var(--ic-space-lg);--icon-height:var(--ic-space-lg)}:host(.expand-toggle-group-child) ic-button{min-width:100%;min-height:100%;white-space:normal;height:100%}:host(.expand-toggle-group-child) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus)}:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n    var(--ic-border-focus)}:host(:focus){z-index:1}:host ::part(button){border:var(--button-border)}:host(.ic-toggle-button-checked) ::part(button){background-color:var(--ic-action-default);color:var(--ic-architectural-white);box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white)}:host(.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n    var(--ic-border-focus)}:host(.ic-toggle-button-checked) ::part(button):hover{background-color:var(--button-default-hover)}:host(.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active{background-color:var(--ic-action-default-pressed)}:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button){background-color:var(--ic-action-dark)}:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):hover{background-color:var(--ic-action-dark-hover)}:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):active{background-color:var(--ic-action-dark-pressed)}:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button){background-color:var(--ic-action-light);color:var(--ic-color-text-primary);box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black)}:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):hover{background-color:var(--ic-action-light-hover)}:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):active{background-color:var(--ic-action-light-pressed)}:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),\n    var(--ic-border-focus)}:host(.ic-toggle-button-disabled) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled) ::part(button){border:var(--button-border)}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button){background-color:transparent}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button)::before{background-image:radial-gradient(var(--ic-architectural-400) 95%, white 20%);background-repeat:no-repeat}:host(.ic-toggle-button-icon) ::part(button){border:var(--button-border);height:calc(var(--ic-space-xl) + var(--ic-space-xs));width:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-toggle-button-icon) ::part(button):active{background-color:var(--ic-action-default-bg-active)}:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active{background-color:var(--ic-action-dark-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active{background-color:var(--ic-action-light-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button){height:var(--ic-space-xl);width:var(--ic-space-xl)}:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button){height:var(--ic-space-xxl);width:var(--ic-space-xxl)}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button){background-color:var(--button-default-active)}:host(.ic-toggle-button-loading) ::part(ic-loading-container){--inner-color:var(--ic-architectural-white)}:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-light) ::part(button){background-color:var(--ic-action-light-pressed)}:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-dark) ::part(button){background-color:var(--ic-action-dark-pressed)}@media (forced-colors: active){:host(.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-checked) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button){background-color:GrayText}}";
+const icToggleButtonCss = "/*! 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{--toggle-button-border:var(--ic-toggle-button-unselected-border);--toggle-button-text-colour:var(--ic-toggle-button-unselected-text);--toggle-button-border-hover:var(--ic-toggle-button-unselected-border-hover);--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-unselected-text-hover\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-unselected-border-pressed\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-unselected-text-pressed\n  )}:host(.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border);--toggle-button-text-colour:var(--ic-toggle-button-selected-text);--toggle-button-border-hover:var(--ic-toggle-button-selected-border-hover);--toggle-button-text-colour-hover:var(--ic-toggle-button-selected-text);--toggle-button-border-active:var(\n    --ic-toggle-button-selected-border-pressed\n  );--toggle-button-text-colour-active:var(--ic-toggle-button-selected-text)}:host(.ic-toggle-button-monochrome){--toggle-button-border:var(--ic-toggle-button-unselected-border-monochrome);--toggle-button-text-colour:var(\n    --ic-toggle-button-unselected-text-monochrome\n  );--toggle-button-border-hover:var(\n    --ic-toggle-button-unselected-border-hover-monochrome\n  );--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-unselected-text-monochrome\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-unselected-border-pressed-monochrome\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-unselected-text-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border-monochrome);--toggle-button-text-colour:var(--ic-toggle-button-selected-text-monochrome);--toggle-button-border-hover:var(\n    --ic-toggle-button-selected-border-hover-monochrome\n  );--toggle-button-text-colour-hover:var(\n    --ic-toggle-button-selected-text-monochrome\n  );--toggle-button-border-active:var(\n    --ic-toggle-button-selected-border-pressed-monochrome\n  );--toggle-button-text-colour-active:var(\n    --ic-toggle-button-selected-text-monochrome\n  )}:host(.ic-toggle-button-disabled){--toggle-button-border:var(--ic-toggle-button-unselected-border-disabled);--toggle-button-text-colour:var(--ic-toggle-button-unselected-text-disabled)}:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome){--toggle-button-border:var(\n    --ic-toggle-button-unselected-border-disabled-monochrome\n  );--toggle-button-text-colour:var(\n    --ic-toggle-button-unselected-text-disabled-monochrome\n  )}:host(.ic-toggle-button-disabled.ic-toggle-button-checked){--toggle-button-border:var(--ic-toggle-button-selected-border-disabled);--toggle-button-text-colour:var(--ic-toggle-button-selected-text-disabled)}:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome){--toggle-button-border:var(\n    --ic-toggle-button-selected-border-disabled-monochrome\n  );--toggle-button-text-colour:var(\n    --ic-toggle-button-selected-text-disabled-monochrome\n  )}:host(.expand-toggle-group-child) ::part(button){width:100%;min-height:inherit;white-space:inherit;height:inherit}:host ic-button{--icon-width:var(--ic-space-lg);--icon-height:var(--ic-space-lg)}:host(.expand-toggle-group-child) ic-button{min-width:100%;min-height:100%;white-space:normal;height:100%}:host(.expand-toggle-group-child) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus)}:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n    var(--ic-border-focus)}:host(:focus){z-index:1}:host ::part(button){border:var(--ic-border-width) solid var(--toggle-button-border);color:var(--toggle-button-text-colour)}:host ::part(button):hover{border:var(--ic-border-width) solid var(--toggle-button-border-hover);color:var(--toggle-button-text-colour-hover)}:host ::part(button):active{border:var(--ic-border-width) solid var(--toggle-button-border-active);color:var(--toggle-button-text-colour-active)}:host(.ic-toggle-button-disabled) ::part(button){border:var(--ic-space-1px) dashed var(--toggle-button-border);color:var(--toggle-button-text-colour)}:host(.ic-toggle-button-checked) ::part(button){background-color:var(--ic-toggle-button-selected-background);box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n    var(--ic-toggle-button-selected-text)}:host(.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n    var(--ic-border-focus)}:host ::part(button):hover{background-color:var(--ic-toggle-button-unselected-background-hover)}:host ::part(button):active{background-color:var(--ic-toggle-button-unselected-background-pressed)}:host(.ic-toggle-button-checked) ::part(button):hover{background-color:var(--ic-toggle-button-selected-background-hover)}:host(.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active{background-color:var(--ic-toggle-button-selected-background-pressed)}:host(.ic-toggle-button-monochrome) ::part(button):hover{background-color:var(\n    --ic-toggle-button-unselected-background-hover-monochrome\n  )}:host(.ic-toggle-button-monochrome) ::part(button):active{background-color:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button){background-color:var(--ic-toggle-button-selected-background-monochrome)}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):hover{background-color:var(\n    --ic-toggle-button-selected-background-hover-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):active,:host(.ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):active{background-color:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button):focus{box-shadow:inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-text),\n    var(--ic-border-focus)}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button){background-color:transparent}:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button)::before{background-image:radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled) 95%,\n    white 20%\n  );background-repeat:no-repeat}:host(.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) ::part(button),:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome) ::part(button)::before{background-image:radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n    white 20%\n  );background-repeat:no-repeat}:host(.ic-toggle-button-icon) ::part(button){height:calc(var(--ic-space-xl) + var(--ic-space-xs));width:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-toggle-button-icon) ::part(button):active{background-color:var(--ic-action-default-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active{background-color:var(--ic-action-dark-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active{background-color:var(--ic-action-light-bg-pressed)}:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button){height:var(--ic-space-xl);width:var(--ic-space-xl)}:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button){height:var(--ic-space-xxl);width:var(--ic-space-xxl)}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-selected-background-pressed\n  );background-color:var(--ic-toggle-button-selected-background-pressed)}:host(.ic-toggle-button-loading) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-unselected-background-pressed\n  );background-color:var(--ic-toggle-button-unselected-background-pressed)}:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(ic-loading-container){--inner-color:var(--ic-toggle-button-loading-bar)}:host(.ic-toggle-button-loading) ::part(ic-loading-container){--inner-color:var(--ic-toggle-button-selected-loading-bar)}:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );background-color:var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  )}:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button){--loading-button-background:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );background-color:var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  )}@media (forced-colors: active){:host(.ic-toggle-button-checked) ::part(button),:host(.ic-toggle-button-checked) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),:host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover{background-color:Highlight}:host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button){background-color:GrayText}}";
 
 const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends HTMLElement {
     constructor() {
@@ -24,14 +24,15 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 });
         };
         this.accessibleLabel = undefined;
-        this.appearance = "default";
+        this.checked = false;
         this.disabled = false;
         this.fullWidth = false;
         this.iconPlacement = undefined;
         this.label = undefined;
         this.loading = false;
+        this.monochrome = false;
         this.size = "medium";
-        this.checked = false;
+        this.theme = "inherit";
         this.variant = "default";
     }
     componentWillLoad() {
@@ -57,27 +58,30 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
     }
     render() {
         return (h(Host, { class: {
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
                 ["ic-toggle-button-disabled"]: this.disabled,
                 ["ic-toggle-button-checked"]: this.checked,
-                [`ic-toggle-button-${this.appearance}`]: true,
                 ["ic-toggle-button-icon"]: this.variant === "icon",
                 [`ic-toggle-button-${this.size}`]: true,
                 ["ic-toggle-button-loading"]: this.loading,
-            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
+                ["ic-toggle-button-monochrome"]: this.monochrome,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get style() { return icToggleButtonCss; }
 }, [17, "ic-toggle-button", {
         "accessibleLabel": [1, "accessible-label"],
-        "appearance": [1],
+        "checked": [1540],
         "disabled": [4],
         "fullWidth": [4, "full-width"],
         "iconPlacement": [1, "icon-placement"],
         "label": [1],
         "loading": [4],
+        "monochrome": [4],
         "size": [1],
-        "checked": [1540],
+        "theme": [1],
         "variant": [513]
     }, [[2, "click", "handleHostClick"]]]);
 function defineCustomElement$1() {

package/dist/components/ic-toggle-button.js.map

@@ -1 +1 @@
-{"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-default)\n  );\n}\n\n:host(.ic-toggle-button-dark) {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-dark)\n  );\n}\n\n:host(.ic-toggle-button-light) {\n  --button-border: var(\n    --toggle-button-border,\n    var(--ic-border-width) solid var(--ic-action-light)\n  );\n}\n\n:host(.ic-toggle-button-disabled) {\n  --button-border: var(--toggle-button-border, var(--ic-border-disabled));\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n  width: 100%;\n  min-height: inherit;\n  white-space: inherit;\n  height: inherit;\n}\n\n:host ic-button {\n  --icon-width: var(--ic-space-lg);\n  --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n  min-width: 100%;\n  min-height: 100%;\n  white-space: normal;\n  height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n    var(--ic-border-focus);\n}\n\n:host(:focus) {\n  z-index: 1;\n}\n\n:host ::part(button) {\n  border: var(--button-border);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-action-default);\n  color: var(--ic-architectural-white);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n  background-color: var(--button-default-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n  background-color: var(--ic-action-default-pressed);\n}\n\n:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-action-dark);\n}\n\n:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):hover {\n  background-color: var(--ic-action-dark-hover);\n}\n\n:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-dark.ic-toggle-button-checked)\n  ::part(button):active {\n  background-color: var(--ic-action-dark-pressed);\n}\n\n:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-action-light);\n  color: var(--ic-color-text-primary);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);\n}\n\n:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):hover {\n  background-color: var(--ic-action-light-hover);\n}\n\n:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-light.ic-toggle-button-checked)\n  ::part(button):active {\n  background-color: var(--ic-action-light-pressed);\n}\n\n:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled) ::part(button) {\n  border: var(--button-border);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button) {\n  background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button)::before {\n  background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);\n  background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n  border: var(--button-border);\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n  background-color: var(--ic-action-default-bg-active);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n  background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n  height: var(--ic-space-xxl);\n  width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n  background-color: var(--button-default-active);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n  --inner-color: var(--ic-architectural-white);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-light)\n  ::part(button) {\n  background-color: var(--ic-action-light-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-dark)\n  ::part(button) {\n  background-color: var(--ic-action-dark-pressed);\n}\n\n@media (forced-colors: active) {\n  :host(.ic-toggle-button-checked) ::part(button),\n  :host(.ic-toggle-button-checked) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement || \"left\";\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.checked = !this.checked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"ic-toggle-button-disabled\"]: this.disabled,\n          [\"ic-toggle-button-checked\"]: this.checked,\n          [`ic-toggle-button-${this.appearance}`]: true,\n          [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n          [`ic-toggle-button-${this.size}`]: true,\n          [\"ic-toggle-button-loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.checked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.checked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${this.iconPosition}-icon`}></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-toggle-button.js","mappings":"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","names":[],"sources":["src/components/ic-toggle-button/ic-toggle-button.css?tag=ic-toggle-button&encapsulation=shadow","src/components/ic-toggle-button/ic-toggle-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */\n:host {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-hover\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-pressed\n  );\n}\n\n:host(.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);\n  --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed\n  );\n  --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-unselected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-unselected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-unselected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);\n  --toggle-button-border-hover: var(\n    --ic-toggle-button-selected-border-hover-monochrome\n  );\n  --toggle-button-text-colour-hover: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n  --toggle-button-border-active: var(\n    --ic-toggle-button-selected-border-pressed-monochrome\n  );\n  --toggle-button-text-colour-active: var(\n    --ic-toggle-button-selected-text-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled) {\n  --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {\n  --toggle-button-border: var(\n    --ic-toggle-button-unselected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-unselected-text-disabled-monochrome\n  );\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {\n  --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);\n  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);\n}\n\n:host(\n    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome\n  ) {\n  --toggle-button-border: var(\n    --ic-toggle-button-selected-border-disabled-monochrome\n  );\n  --toggle-button-text-colour: var(\n    --ic-toggle-button-selected-text-disabled-monochrome\n  );\n}\n\n:host(.expand-toggle-group-child) ::part(button) {\n  width: 100%;\n  min-height: inherit;\n  white-space: inherit;\n  height: inherit;\n}\n\n:host ic-button {\n  --icon-width: var(--ic-space-lg);\n  --icon-height: var(--ic-space-lg);\n}\n\n:host(.expand-toggle-group-child) ic-button {\n  min-width: 100%;\n  min-height: 100%;\n  white-space: normal;\n  height: 100%;\n}\n\n:host(.expand-toggle-group-child) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),\n    var(--ic-border-focus);\n}\n\n:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,\n:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),\n    var(--ic-border-focus);\n}\n\n:host(:focus) {\n  z-index: 1;\n}\n\n:host ::part(button) {\n  border: var(--ic-border-width) solid var(--toggle-button-border);\n  color: var(--toggle-button-text-colour);\n}\n\n:host ::part(button):hover {\n  border: var(--ic-border-width) solid var(--toggle-button-border-hover);\n  color: var(--toggle-button-text-colour-hover);\n}\n\n:host ::part(button):active {\n  border: var(--ic-border-width) solid var(--toggle-button-border-active);\n  color: var(--toggle-button-text-colour-active);\n}\n\n:host(.ic-toggle-button-disabled) ::part(button) {\n  border: var(--ic-space-1px) dashed var(--toggle-button-border);\n  color: var(--toggle-button-text-colour);\n}\n\n:host(.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background);\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n    var(--ic-toggle-button-selected-text);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),\n    var(--ic-border-focus);\n}\n\n:host ::part(button):hover {\n  background-color: var(--ic-toggle-button-unselected-background-hover);\n}\n\n:host ::part(button):active {\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):hover {\n  background-color: var(--ic-toggle-button-selected-background-hover);\n}\n\n:host(.ic-toggle-button-checked) ::part(button):active,\n:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-unselected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome) ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {\n  background-color: var(--ic-toggle-button-selected-background-monochrome);\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):hover {\n  background-color: var(\n    --ic-toggle-button-selected-background-hover-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):active,\n:host(\n    .ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked\n  )\n  ::part(button):active {\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)\n  ::part(button):focus {\n  box-shadow: inset 0 0 0 var(--ic-space-xxxs)\n      var(--ic-toggle-button-selected-text),\n    var(--ic-border-focus);\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button) {\n  background-color: transparent;\n}\n\n:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),\n:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(\n    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome\n  )\n  ::part(button),\n:host(\n    .ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome\n  )\n  ::part(button)::before {\n  background-image: radial-gradient(\n    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,\n    white 20%\n  );\n  background-repeat: no-repeat;\n}\n\n:host(.ic-toggle-button-icon) ::part(button) {\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  width: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-toggle-button-icon) ::part(button):active {\n  background-color: var(--ic-action-default-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {\n  background-color: var(--ic-action-light-bg-pressed);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {\n  height: var(--ic-space-xl);\n  width: var(--ic-space-xl);\n}\n\n:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {\n  height: var(--ic-space-xxl);\n  width: var(--ic-space-xxl);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed\n  );\n  background-color: var(--ic-toggle-button-selected-background-pressed);\n}\n\n:host(.ic-toggle-button-loading) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed\n  );\n  background-color: var(--ic-toggle-button-unselected-background-pressed);\n}\n\n:host(.ic-toggle-button-checked.ic-toggle-button-loading)\n  ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-loading-bar);\n}\n\n:host(.ic-toggle-button-loading) ::part(ic-loading-container) {\n  --inner-color: var(--ic-toggle-button-selected-loading-bar);\n}\n\n:host(\n    .ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome\n  )\n  ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n  background-color: var(\n    --ic-toggle-button-selected-background-pressed-monochrome\n  );\n}\n\n:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {\n  --loading-button-background: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n  background-color: var(\n    --ic-toggle-button-unselected-background-pressed-monochrome\n  );\n}\n\n@media (forced-colors: active) {\n  :host(.ic-toggle-button-checked) ::part(button),\n  :host(.ic-toggle-button-checked) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),\n  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {\n    background-color: Highlight;\n  }\n\n  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {\n    background-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"medium\";\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 toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement || \"left\";\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.checked = !this.checked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          [\"ic-toggle-button-disabled\"]: this.disabled,\n          [\"ic-toggle-button-checked\"]: this.checked,\n          [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n          [`ic-toggle-button-${this.size}`]: true,\n          [\"ic-toggle-button-loading\"]: this.loading,\n          [\"ic-toggle-button-monochrome\"]: this.monochrome,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.checked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.checked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${this.iconPosition}-icon`}></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}