@carbon/web-components 2.59.0 → 2.60.0

package/es-custom/components/notification/actionable-notification.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification.scss.js","names":[],"sources":["../../../src/components/notification/actionable-notification.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2025\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/components/notification/index' as *;\n@use '@carbon/styles/scss/components/button';\n@use '@carbon/styles/scss/components/button/mixins' as button-mixins;\n@use '@carbon/styles/scss/components/button/vars' as button-vars;\n@use '@carbon/styles/scss/utilities/layout' as *;\n\n@include actionable-notification;\n\n:host(#{$prefix}-actionable-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: none;\n  outline: none;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not(\n        [low-contrast]\n      )[kind='tertiary']\n  )\n  button {\n  @include button-mixins.button-theme(\n    transparent,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse-hover,\n    currentColor,\n    $notification-action-tertiary-inverse-active\n  );\n\n  &:focus {\n    border-color: $focus-inverse;\n    background-color: $notification-action-tertiary-inverse;\n    box-shadow:\n      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,\n      inset 0 0 0 button-vars.$button-border-width $background-inverse;\n    color: $notification-action-tertiary-inverse-text;\n  }\n\n  &:hover {\n    color: $notification-action-tertiary-inverse-text;\n  }\n\n  &:active {\n    border-color: transparent;\n    background-color: $notification-action-tertiary-inverse-active;\n    color: $notification-action-tertiary-inverse-text;\n  }\n}\n\n:host(#{$prefix}-actionable-notification-button[low-contrast][kind='ghost'])\n  button {\n  &:hover,\n  &:active {\n    background-color: $notification-action-hover;\n  }\n\n  &:focus {\n    outline-color: $focus;\n  }\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not([low-contrast])[kind='ghost']\n  )\n  button {\n  color: $link-inverse;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button[hide-close-button][kind='ghost']\n  )\n  button {\n  margin-inline-end: $spacing-03;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline])) {\n  @include actionable-notification-toast-base;\n\n  .#{$prefix}--actionable-notification__content {\n    flex-direction: column;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[inline][low-contrast])::before,\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-actionable-notification[low-contrast]),\n:host(#{$prefix}-callout-notification[low-contrast]) {\n  @include actionable-notification-low-contrast-base;\n}\n\n:host(#{$prefix}-actionable-notification[open]) {\n  display: flex;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline]))\n  .#{$prefix}--actionable-notification__close-button {\n  position: absolute;\n}\n\n:host(#{$prefix}-actionable-notification[hide-close-button])\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon,\n  .#{$prefix}--toast-notification__icon {\n    path[data-icon-path='inner-path'] {\n      fill: $black-100;\n      opacity: 1;\n    }\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n:host(#{$prefix}-callout-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: flex;\n  outline: none;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-callout-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-callout-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-callout-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-callout-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {\n  margin-inline-end: $spacing-03;\n}\n"],"mappings":""}
+{"version":3,"file":"actionable-notification.scss.js","names":[],"sources":["../../../src/components/notification/actionable-notification.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2025, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/colors' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/components/notification/index' as *;\n@use '@carbon/styles/scss/components/button';\n@use '@carbon/styles/scss/components/button/mixins' as button-mixins;\n@use '@carbon/styles/scss/components/button/vars' as button-vars;\n@use '@carbon/styles/scss/utilities/layout' as *;\n\n@include actionable-notification;\n\n:host(#{$prefix}-actionable-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: none;\n  outline: none;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not(\n        [low-contrast]\n      )[kind='tertiary']\n  )\n  button {\n  @include button-mixins.button-theme(\n    transparent,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse,\n    $notification-action-tertiary-inverse-hover,\n    currentColor,\n    $notification-action-tertiary-inverse-active\n  );\n\n  &:focus {\n    border-color: $focus-inverse;\n    background-color: $notification-action-tertiary-inverse;\n    box-shadow:\n      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,\n      inset 0 0 0 button-vars.$button-border-width $background-inverse;\n    color: $notification-action-tertiary-inverse-text;\n  }\n\n  @media (any-hover: hover) {\n    &:hover {\n      color: $notification-action-tertiary-inverse-text;\n    }\n  }\n\n  &:active {\n    border-color: transparent;\n    background-color: $notification-action-tertiary-inverse-active;\n    color: $notification-action-tertiary-inverse-text;\n  }\n}\n\n:host(#{$prefix}-actionable-notification-button[low-contrast][kind='ghost'])\n  button {\n  &:active {\n    background-color: $notification-action-hover;\n  }\n\n  @media (any-hover: hover) {\n    &:hover {\n      background-color: $notification-action-hover;\n    }\n  }\n\n  &:focus {\n    outline-color: $focus;\n  }\n}\n\n:host(\n    #{$prefix}-actionable-notification-button:not([low-contrast])[kind='ghost']\n  )\n  button {\n  color: $link-inverse;\n}\n\n:host(\n    #{$prefix}-actionable-notification-button[hide-close-button][kind='ghost']\n  )\n  button {\n  margin-inline-end: $spacing-03;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline])) {\n  @include actionable-notification-toast-base;\n\n  .#{$prefix}--actionable-notification__content {\n    flex-direction: column;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[inline][low-contrast])::before,\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-actionable-notification[low-contrast]),\n:host(#{$prefix}-callout-notification[low-contrast]) {\n  @include actionable-notification-low-contrast-base;\n}\n\n:host(#{$prefix}-actionable-notification[open]) {\n  display: flex;\n}\n\n:host(#{$prefix}-actionable-notification:not([inline]))\n  .#{$prefix}--actionable-notification__close-button {\n  position: absolute;\n}\n\n:host(#{$prefix}-actionable-notification[hide-close-button])\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon,\n  .#{$prefix}--toast-notification__icon {\n    path[data-icon-path='inner-path'] {\n      fill: $black-100;\n      opacity: 1;\n    }\n  }\n}\n\n:host(#{$prefix}-actionable-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-actionable-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-actionable-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n:host(#{$prefix}-callout-notification) {\n  @include actionable-notification-base;\n  @include emit-layout-tokens();\n\n  display: flex;\n  outline: none;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__close-button {\n  display: none;\n}\n\n:host(#{$prefix}-callout-notification[inline][low-contrast])::before {\n  @include actionable-notification-low-contrast-inline-before;\n}\n\n:host(#{$prefix}-callout-notification[kind='success']) {\n  @include actionable-notification-success-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='success'][low-contrast]) {\n  @include actionable-notification-low-contrast-success;\n}\n\n:host(#{$prefix}-callout-notification[kind='info']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info-square']) {\n  @include actionable-notification-info-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='info'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='info-square'][low-contrast]) {\n  @include actionable-notification-low-contrast-info;\n}\n\n:host(#{$prefix}-callout-notification[kind='warning']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning-alt']) {\n  @include actionable-notification-warning-base;\n\n  /* TODO: Remove this once the following issue with icon fill is resolved:\n  ** https://github.com/carbon-design-system/carbon/issues/13616\n  */\n  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {\n    fill: $black-100;\n    opacity: 1;\n  }\n}\n\n:host(#{$prefix}-callout-notification[kind='warning'][low-contrast]),\n:host(#{$prefix}-callout-notification[kind='warning-alt'][low-contrast]) {\n  @include actionable-notification-low-contrast-warning;\n}\n\n:host(#{$prefix}-callout-notification[kind='error']) {\n  @include actionable-notification-error-base;\n}\n\n:host(#{$prefix}-callout-notification[kind='error'][low-contrast]) {\n  @include actionable-notification-low-contrast-error;\n}\n\n:host(#{$prefix}-callout-notification)\n  .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {\n  margin-inline-end: $spacing-03;\n}\n"],"mappings":""}

package/es-custom/components/notification/callout-notification.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import "./defs.js";
 import actionable_notification_default from "./actionable-notification.scss.js";

package/es-custom/components/notification/inline-notification.js

@@ -7,7 +7,7 @@
 
 import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.135.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import { NOTIFICATION_KIND, NOTIFICATION_TYPE } from "./defs.js";
@@ -155,7 +155,7 @@ let CDSInlineNotification = class CDSInlineNotification extends FocusMixin(LitEl
 		});
 	}
 	connectedCallback() {
-		if (!this.hasAttribute("role")) this.setAttribute("role", "alert");
+		if (!this.hasAttribute("role")) this.setAttribute("role", "status");
 		super.connectedCallback();
 	}
 	updated(changedProperties) {

package/es-custom/components/notification/inline-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-notification.js","names":["styles","customElement"],"sources":["../../../src/components/notification/inline-notification.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport CheckmarkFilled20 from '@carbon/icons/es/checkmark--filled/20.js';\nimport InformationFilled20 from '@carbon/icons/es/information--filled/20.js';\nimport InformationSquareFilled20 from '@carbon/icons/es/information--square--filled/20.js';\nimport WarningFilled20 from '@carbon/icons/es/warning--filled/20.js';\nimport WarningAltFilled20 from '@carbon/icons/es/warning--alt--filled/20.js';\nimport ErrorFilled20 from '@carbon/icons/es/error--filled/20.js';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';\nimport styles from './inline-notification.scss?lit';\n\nexport { NOTIFICATION_KIND, NOTIFICATION_TYPE };\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconNamesForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: InformationFilled20,\n  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n *\n * @element cds-custom-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-custom-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires cds-custom-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass CDSInlineNotification extends FocusMixin(LitElement) {\n  /**\n   * Current timeout identifier\n   */\n  protected _timeoutID: number | null = null;\n\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Cancels the current timeout configured for the notification\n   *\n   * @param timeoutID current timeout's identifier\n   */\n  protected _cancelTimeout(timeoutID: number) {\n    clearTimeout(timeoutID);\n    this._timeoutID = null;\n  }\n\n  /**\n   * Overrides (if exists) the timeout to close the notification\n   *\n   * @param timeout the time in ms\n   */\n  protected _initializeTimeout(timeout: number) {\n    if (this._timeoutID) {\n      this._cancelTimeout(this._timeoutID);\n    }\n    this._timeoutID = setTimeout(\n      this._handleUserOrTimerInitiatedClose.bind(this, null),\n      timeout\n    ) as unknown as number;\n  }\n\n  /**\n   * Handles `click` event on the close button.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserOrTimerInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated or through timer close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request, if there is one.\n   */\n  protected _handleUserOrTimerInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSInlineNotification).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSInlineNotification).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  /**\n   * @returns The template part for the close button.\n   */\n  protected _renderButton() {\n    const {\n      ariaLabel,\n      _type: type,\n      _handleClickCloseButton: handleClickCloseButton,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--${type}-notification__close-button\"\n        aria-label=${ifDefined(ariaLabel)}\n        title=${ifDefined(ariaLabel)}\n        @click=\"${handleClickCloseButton}\">\n        ${iconLoader(Close16, {\n          class: `${prefix}--${type}-notification__close-icon`,\n        })}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The template part for the text contents.\n   */\n  protected _renderText() {\n    const { subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <p class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </p>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The template part for the icon.\n   */\n  protected _renderIcon() {\n    const { statusIconDescription, kind, _type: type } = this;\n    const IconComponent = iconNamesForKinds[kind];\n    return !IconComponent\n      ? undefined\n      : iconLoader(IconComponent, {\n          class: `${prefix}--${type}-notification__icon`,\n          'aria-label': statusIconDescription,\n        });\n  }\n\n  /**\n   * Provide a description for \"close\" icon button that can be read by screen readers\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel!: string;\n\n  /**\n   * `true` to hide the close button.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  /**\n   * Provide a description for \"status\" icon that can be read by screen readers\n   */\n  @property({ attribute: 'status-icon-description' })\n  statusIconDescription!: string;\n\n  /**\n   * Notification kind.\n   */\n  @property({ reflect: true })\n  kind = NOTIFICATION_KIND.SUCCESS;\n\n  /**\n   * Low contrast mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Specify an optional duration the notification should be closed in\n   */\n  @property({ type: Number, reflect: true })\n  timeout: number | null = null;\n\n  /**\n   * The subtitle.\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * The title.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alert');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const openChanged = changedProperties.has('open');\n    const timeoutChanged = changedProperties.has('timeout');\n\n    if (openChanged || timeoutChanged) {\n      if (this.open && this.timeout) {\n        this._initializeTimeout(this.timeout);\n      } else if (!this.open && this._timeoutID) {\n        this._cancelTimeout(this._timeoutID);\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()}${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this notification is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-notification-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSInlineNotification;\n"],"mappings":"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"}
+{"version":3,"file":"inline-notification.js","names":["styles","customElement"],"sources":["../../../src/components/notification/inline-notification.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport CheckmarkFilled20 from '@carbon/icons/es/checkmark--filled/20.js';\nimport InformationFilled20 from '@carbon/icons/es/information--filled/20.js';\nimport InformationSquareFilled20 from '@carbon/icons/es/information--square--filled/20.js';\nimport WarningFilled20 from '@carbon/icons/es/warning--filled/20.js';\nimport WarningAltFilled20 from '@carbon/icons/es/warning--alt--filled/20.js';\nimport ErrorFilled20 from '@carbon/icons/es/error--filled/20.js';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';\nimport styles from './inline-notification.scss?lit';\n\nexport { NOTIFICATION_KIND, NOTIFICATION_TYPE };\n\n/**\n * The default icons, keyed by notification kind.\n */\nconst iconNamesForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: InformationFilled20,\n  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\n/**\n * Inline notification.\n *\n * @element cds-custom-inline-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-custom-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires cds-custom-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-inline-notification`)\nclass CDSInlineNotification extends FocusMixin(LitElement) {\n  /**\n   * Current timeout identifier\n   */\n  protected _timeoutID: number | null = null;\n\n  /**\n   * Notification type.\n   */\n  protected _type = NOTIFICATION_TYPE.INLINE;\n\n  /**\n   * Cancels the current timeout configured for the notification\n   *\n   * @param timeoutID current timeout's identifier\n   */\n  protected _cancelTimeout(timeoutID: number) {\n    clearTimeout(timeoutID);\n    this._timeoutID = null;\n  }\n\n  /**\n   * Overrides (if exists) the timeout to close the notification\n   *\n   * @param timeout the time in ms\n   */\n  protected _initializeTimeout(timeout: number) {\n    if (this._timeoutID) {\n      this._cancelTimeout(this._timeoutID);\n    }\n    this._timeoutID = setTimeout(\n      this._handleUserOrTimerInitiatedClose.bind(this, null),\n      timeout\n    ) as unknown as number;\n  }\n\n  /**\n   * Handles `click` event on the close button.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleClickCloseButton({ target }: MouseEvent) {\n    this._handleUserOrTimerInitiatedClose(target);\n  }\n\n  /**\n   * Handles user-initiated or through timer close request of this modal.\n   *\n   * @param triggeredBy The element that triggered this close request, if there is one.\n   */\n  protected _handleUserOrTimerInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSInlineNotification).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSInlineNotification).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  /**\n   * @returns The template part for the close button.\n   */\n  protected _renderButton() {\n    const {\n      ariaLabel,\n      _type: type,\n      _handleClickCloseButton: handleClickCloseButton,\n    } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--${type}-notification__close-button\"\n        aria-label=${ifDefined(ariaLabel)}\n        title=${ifDefined(ariaLabel)}\n        @click=\"${handleClickCloseButton}\">\n        ${iconLoader(Close16, {\n          class: `${prefix}--${type}-notification__close-icon`,\n        })}\n      </button>\n    `;\n  }\n\n  /**\n   * @returns The template part for the text contents.\n   */\n  protected _renderText() {\n    const { subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <p class=\"${prefix}--${type}-notification__title\">\n          ${title}<slot name=\"title\"></slot>\n        </p>\n        <div class=\"${prefix}--${type}-notification__subtitle\">\n          ${subtitle}<slot name=\"subtitle\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * @returns The template part for the icon.\n   */\n  protected _renderIcon() {\n    const { statusIconDescription, kind, _type: type } = this;\n    const IconComponent = iconNamesForKinds[kind];\n    return !IconComponent\n      ? undefined\n      : iconLoader(IconComponent, {\n          class: `${prefix}--${type}-notification__icon`,\n          'aria-label': statusIconDescription,\n        });\n  }\n\n  /**\n   * Provide a description for \"close\" icon button that can be read by screen readers\n   */\n  @property({ attribute: 'aria-label' })\n  ariaLabel!: string;\n\n  /**\n   * `true` to hide the close button.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  /**\n   * Provide a description for \"status\" icon that can be read by screen readers\n   */\n  @property({ attribute: 'status-icon-description' })\n  statusIconDescription!: string;\n\n  /**\n   * Notification kind.\n   */\n  @property({ reflect: true })\n  kind = NOTIFICATION_KIND.SUCCESS;\n\n  /**\n   * Low contrast mode\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'low-contrast' })\n  lowContrast = false;\n\n  /**\n   * `true` if the notification should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /**\n   * Specify an optional duration the notification should be closed in\n   */\n  @property({ type: Number, reflect: true })\n  timeout: number | null = null;\n\n  /**\n   * The subtitle.\n   */\n  @property()\n  subtitle = '';\n\n  /**\n   * The title.\n   */\n  @property()\n  title = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'status');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const openChanged = changedProperties.has('open');\n    const timeoutChanged = changedProperties.has('timeout');\n\n    if (openChanged || timeoutChanged) {\n      if (this.open && this.timeout) {\n        this._initializeTimeout(this.timeout);\n      } else if (!this.open && this._timeoutID) {\n        this._cancelTimeout(this._timeoutID);\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()}${this._renderText()}\n      </div>\n      ${this._renderButton()}\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before this notification is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this notification.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-notification-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this notification is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-notification-closed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSInlineNotification;\n"],"mappings":"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"}