@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

package/dist/nile-toast/nile-toast.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.cjs.js","sources":["../../../src/nile-toast/nile-toast.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n  \n  @property({ type: String, reflect: true }) closeIconName = 'var(--nile-icon-close, var(--ng-icon-x-close))';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error'\n    | 'gray'\n    | 'black' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-icon-check-circle, var(--ng-icon-check-circle))';\n      case 'info':\n        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';\n      case 'warning':\n        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';\n      case 'error':\n        return 'var(--nile-icon-alert-circle, var(--ng-icon-alert-circle))';\n      case 'gray':\n        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';\n      case 'black':\n        return 'var(--nile-icon-info, var(--ng-icon-info-circle))';\n    }\n  }\n\n  getIconColorByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-toast-color-icon-color-success, var(--ng-colors-fg-success-primary))';\n      case 'info':\n        return 'var(--nile-toast-color-icon-color-info, var(--ng-colors-fg-brand-primary-600))';\n      case 'warning':\n        return 'var(--nile-toast-color-icon-color-warning, var(--ng-colors-fg-warning-primary))';\n      case 'error':\n        return 'var(--nile-toast-color-icon-color-error, var(--ng-colors-fg-error-primary))';\n      case 'gray':\n        return 'var(--nile-toast-color-icon-color-gray, var(--ng-colors-fg-tertiary-600))';\n      case 'black':\n        return 'var(--nile-toast-color-icon-color-black)';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n          'alert--gray': this.variant === 'gray',\n          'alert--black': this.variant === 'black',\n          'alert--no-content': this.content === '',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"20\"\n                    color=\"${this.getIconColorByVariant()}\"\n                    method=\"var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))\"\n                  ></nile-icon>\n                </div>\n              `\n            : html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <span\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </span>\n          ${this.title\n            ? html` <span\n                ?hidden=\"${this.content === ''}\"\n                class=${classMap({\n                  'alert__message--content': true,\n                  'alert__message--content-only': !!this.title,\n                })}\n              >\n                ${this.content}\n              </span>`\n            : null}\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"${this.closeIconName}\"\n                label=\"close\"\n                size=\"20\"\n                color=\"var(--nile-colors-neutral-700,var(--ng-colors-fg-quaternary-400))\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"],"names":["toastStack","Object","assign","document","createElement","className","NileToast","u","constructor","this","hasSlotController","HasSlotController","open","noIcon","closable","hasSlottedContent","hasSlottedIcon","prefixImageUrl","closeIconName","variant","duration","Infinity","title","content","tags","_this","_inherits","_a","_createClass","key","value","firstUpdated","base","hidden","restartAutoHide","clearTimeout","autoHideTimeout","window","setTimeout","hide","handleCloseClick","handleMouseMove","_handleOpenChange","_asyncToGenerator","_regeneratorRuntime","mark","_callee","_j","_i","_o","_j2","_i2","_o2","wrap","_callee$","_context2","prev","next","emit","stopAnimations","getAnimation","dir","animateTo","keyframes","options","stop","handleOpenChange","handleDurationChange","_show","_callee2","_callee2$","_context3","abrupt","waitForEvent","show","_callee3","_callee3$","_context4","getIconNameByVariant","getIconColorByVariant","handleSlotChange","e","slot","target","assignedNodes","flatten","name","nodes","length","_toast","_callee4","_this3","_callee4$","_context5","Promise","resolve","parentElement","body","append","appendChild","requestAnimationFrame","clientWidth","addEventListener","removeChild","querySelector","remove","once","toast","toastTags","imageUrl","html","_templateObject","_taggedTemplateLiteral","render","_this$tags","_this4","_templateObject2","classMap","alert","test","_templateObject3","_templateObject4","_templateObject5","_templateObject6","map","tag","_templateObject7","_templateObject8","NileElement","styles","__decorate","query","prototype","property","type","Boolean","reflect","String","Number","Array","watch","waitUntilFirstUpdate","_export","customElement","setDefaultAnimation","opacity","scale","easing"],"mappings":"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"}
+{"version":3,"file":"nile-toast.cjs.js","sources":["../../../src/nile-toast/nile-toast.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\n\nimport '../nile-icon-button/nile-icon-button';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-toast.css';\nimport type { CSSResultGroup } from 'lit';\n\nconst toastStack = Object.assign(document.createElement('div'), {\n  className: 'nile-toast-stack',\n});\n\n/**\n * Nile icon component.\n *\n * @tag nile-toast\n *\n * @dependency nile-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the alert opens.\n * @event nile-after-show - Emitted after the alert opens and all animations are complete.\n * @event nile-hide - Emitted when the alert closes.\n * @event nile-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<nile-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n\n@customElement('nile-toast')\nexport class NileToast extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private autoHideTimeout: number;\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'icon',\n    'suffix'\n  );\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Boolean, reflect: true }) noIcon = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedContent = false;\n\n  @property({ type: Boolean, reflect: true }) hasSlottedIcon = false;\n\n  @property({ type: String, reflect: true }) prefixImageUrl = '';\n  \n  @property({ type: String, reflect: true }) closeIconName = 'close';\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'success'\n    | 'info'\n    | 'warning'\n    | 'error'\n    | 'gray'\n    | 'black' = 'success';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  @property({ type: String }) title = '';\n\n  @property({ type: String }) content = '';\n\n  @property({ type: Array, reflect: true }) tags: any[] = [];\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    clearTimeout(this.autoHideTimeout);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(\n        () => this.hide(),\n        this.duration\n      );\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  private handleMouseMove() {\n    this.restartAutoHide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('nile-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('nile-after-show');\n    } else {\n      // Hide\n      this.emit('nile-hide');\n\n      clearTimeout(this.autoHideTimeout);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', {\n        dir: 'ltr',\n      });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('nile-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'nile-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'nile-after-hide');\n  }\n\n  getIconNameByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'check-circle';\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'alert-circle';\n      case 'error':\n        return 'alert-circle';\n      case 'gray':\n        return 'info-circle';\n      case 'black':\n        return 'info-circle';\n    }\n  }\n\n  getIconColorByVariant() {\n    switch (this.variant) {\n      case 'success':\n        return 'var(--nile-toast-color-icon-color-success)';\n      case 'info':\n        return 'var(--nile-toast-color-icon-color-info)';\n      case 'warning':\n        return 'var(--nile-toast-color-icon-color-warning)';\n      case 'error':\n        return 'var(--nile-toast-color-icon-color-error)';\n      case 'gray':\n        return 'var(--nile-toast-color-icon-color-gray)';\n      case 'black':\n        return 'var(--nile-toast-color-icon-color-black)';\n    }\n  }\n\n  handleSlotChange(e: any) {\n    const slot = e.target;\n    const nodes = slot.assignedNodes({ flatten: true });\n    if (slot.name === 'message') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedContent = nodes.length > 0;\n    }\n\n    if (slot.name === 'icon') {\n      const nodes = slot.assignedNodes({ flatten: true });\n      this.hasSlottedIcon = nodes.length > 0;\n    }\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      if (toastStack.parentElement === null) {\n        document.body.append(toastStack);\n      }\n\n      toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'nile-after-hide',\n        () => {\n          toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (toastStack.querySelector('nile-alert') === null) {\n            toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  private toastTags(content: string, imageUrl: string) {\n    return html`\n      <div class=\"alert__tag\">\n        <img class=\"alert__tag-image\" src=\"${imageUrl}\" />\n        <span class=\"alert__tag-content\"> ${content} </span>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--success': this.variant === 'success',\n          'alert--info': this.variant === 'info',\n          'alert--warning': this.variant === 'warning',\n          'alert--error': this.variant === 'error',\n          'alert--gray': this.variant === 'gray',\n          'alert--black': this.variant === 'black',\n          'alert--no-content': this.content === '',\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mousemove=${this.handleMouseMove}\n      >\n        <slot name=\"icon\" part=\"icon\" ?hidden=\"${this.noIcon === true}\">\n          ${!this.prefixImageUrl\n            ? html`\n                <div\n                  class=\"alert__prefix-icon-container\"\n                  ?hidden=\"${this.hasSlottedIcon ||\n                  this.prefixImageUrl.length > 0}\"\n                >\n                  <nile-icon\n                    name=\"${this.getIconNameByVariant()}\"\n                    size=\"20\"\n                    color=\"${this.getIconColorByVariant()}\"\n                    method=\"stroke\"\n                  ></nile-icon>\n                </div>\n              `\n            : html`\n                <img src=\"${this.prefixImageUrl}\" class=\"alert__prefix-img\" />\n              `}\n        </slot>\n\n        <slot\n          name=\"message\"\n          part=\"message\"\n          class=\"alert__message\"\n          aria-live=\"polite\"\n          @slotchange=\"${this.handleSlotChange}\"\n        >\n          <span\n            ?hidden=\"${this.hasSlottedContent && this.title === ''}\"\n            class=\"alert__message--title\"\n          >\n            ${this.title}\n          </span>\n          ${this.title\n            ? html` <span\n                ?hidden=\"${this.content === ''}\"\n                class=${classMap({\n                  'alert__message--content': true,\n                  'alert__message--content-only': !!this.title,\n                })}\n              >\n                ${this.content}\n              </span>`\n            : null}\n          ${this.tags?.length > 0\n            ? html`\n                <div class=\"alert__tags\">\n                  ${this.tags.map(\n                    tag =>\n                      html`<span\n                        >${this.toastTags(tag.content, tag.imageUrl)}</span\n                      >`\n                  )}\n                </div>\n              `\n            : ``}\n        </slot>\n\n        ${this.closable\n          ? html`\n              <nile-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"${this.closeIconName}\"\n                label=\"close\"\n                size=\"20\"\n                color=\"var(--nile-colors-neutral-700)\"\n                @click=${this.handleCloseClick}\n              ></nile-icon-button>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nexport default NileToast;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-toast': NileToast;\n  }\n}\n"],"names":["toastStack","Object","assign","document","createElement","className","_export","NileToast","_a","h","constructor","this","hasSlotController","HasSlotController","open","noIcon","closable","hasSlottedContent","hasSlottedIcon","prefixImageUrl","closeIconName","variant","duration","Infinity","title","content","tags","_this","_inherits","_createClass","key","value","firstUpdated","base","hidden","restartAutoHide","clearTimeout","autoHideTimeout","window","setTimeout","hide","handleCloseClick","handleMouseMove","_handleOpenChange","_asyncToGenerator","_regeneratorRuntime","mark","_callee","_j","_i","_n","_j2","_i2","_n2","wrap","_callee$","_context2","prev","next","emit","stopAnimations","getAnimation","dir","keyframes","options","animateTo","stop","handleOpenChange","handleDurationChange","_show","_callee2","_callee2$","_context3","abrupt","waitForEvent","show","_callee3","_callee3$","_context4","getIconNameByVariant","getIconColorByVariant","handleSlotChange","e","slot","target","assignedNodes","flatten","name","nodes","length","_toast","_callee4","_this3","_callee4$","_context5","Promise","resolve","parentElement","body","append","appendChild","requestAnimationFrame","clientWidth","addEventListener","removeChild","querySelector","remove","once","toast","toastTags","imageUrl","html","_templateObject","_taggedTemplateLiteral","render","_this$tags","_this4","_templateObject2","classMap","alert","test","_templateObject3","_templateObject4","_templateObject5","_templateObject6","map","tag","_templateObject7","_templateObject8","NileElement","styles","__decorate","query","prototype","property","type","Boolean","reflect","String","Number","Array","watch","waitUntilFirstUpdate","customElement","setDefaultAnimation","opacity","scale","easing"],"mappings":"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"}

package/dist/nile-toast/nile-toast.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",a=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: contents;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: var(--nile-spacing-none);\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px;\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    margin: inherit;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: var(--nile-colors-red-500);\n    border-radius: var(--nile-radius-sm);\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .alert__message--title {\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semiboldibold));\n    color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .alert__message--content {\n    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .alert__message--content-only {\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:var(--nile-colors-dark-900);\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:var(--nile-colors-dark-500);\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family:  var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-toast.css.cjs.js.map

package/dist/nile-toast/nile-toast.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-toast.css.cjs.js","sources":["../../../src/nile-toast/nile-toast.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: var(--nile-spacing-none);\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px;\n    border-radius: var(--nile-radius-md, var(--ng-radius-xl));\n    margin: inherit;\n    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: var(--nile-colors-red-500);\n    border-radius: var(--nile-radius-sm);\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-1);\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));\n    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));\n    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-900);\n    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n  }\n\n  .alert__message--title {\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semiboldibold));\n    color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .alert__message--content {\n    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n  }\n\n  .alert__message--content-only {\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));\n\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-toast.css.cjs.js","sources":["../../../src/nile-toast/nile-toast.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Toast CSS\n */\nexport const styles = css`\n  :host {\n    display: contents;\n\n    /* For better DX, we'll reset the margin here so the base part can inherit it */\n    margin: 0;\n  }\n\n  .alert {\n    max-width: 100%;\n    box-sizing: border-box;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    border: solid 2px 2px;\n    border-radius: 8px;\n    margin: inherit;\n    padding: 16px;\n    gap: 16px;\n    width: max-content;\n    min-width: 400px;\n  }\n\n  .alert:not(.alert--has-icon) .alert__icon,\n  .alert:not(.alert--closable) .alert__close-button {\n    display: none;\n  }\n\n  .alert__prefix-icon-container {\n    background-color: red;\n    border-radius: 4px;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .alert__icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 10px;\n  }\n\n  .alert--success {\n    border: 1px solid var(--nile-toast-color-border-success);\n    background: var(--nile-toast-color-background-success);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--success .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-success);\n  }\n\n  .alert--info {\n    border: 1px solid var(--nile-toast-color-border-info);\n    background: var(--nile-toast-color-background-info);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--info .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-info);\n  }\n\n  .alert--warning {\n    border: 1px solid var(--nile-toast-color-border-warning);\n    background: var(--nile-toast-color-background-warning);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--warning .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-warning);\n  }\n\n  .alert--error {\n    border: 1px solid var(--nile-toast-color-border-error);\n    background: var(--nile-toast-color-background-error);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--error .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-error);\n  }\n\n  .alert--gray {\n    border: 1px solid var(--nile-toast-color-border-gray);\n    background: var(--nile-toast-color-background-gray);\n    box-shadow: var(--nile-toast-color-box-shadow);\n  }\n\n  .alert--gray .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-gray);\n  }\n\n  .alert--black {\n    border: 1px solid var(--nile-toast-color-border-black);\n    background: var(--nile-toast-color-background-black);\n    box-shadow: var(--nile-toast-color-box-black);\n  }\n\n  .alert--black .alert__prefix-icon-container {\n    background: var(--nile-toast-color-icon-background-color-black);\n  }\n\n  .alert__message {\n    flex: 1 1 auto;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    align-items: flex-start;\n    font-family: var(--nile-font-family-serif);\n    font-size: 14px;\n    line-height: 20px;\n    color: black;\n    gap:3px;\n  }\n\n  .alert__message--title {\n    font-weight: 600;\n    color:var(--nile-colors-dark-900);\n  }\n\n  .alert__message--content {\n    font-weight:400;\n    color:var(--nile-colors-dark-500);\n  }\n\n  .alert__message--content-only {\n    margin-top: 3px;\n  }\n\n  .alert__close-button {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .alert__tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 4px;\n  }\n\n  .alert__tag {\n    height: 24px;\n    display: flex;\n    border-radius: 4px;\n    border: 1px solid var(--nile-colors-neutral-400);\n    background: var(--nile-colors-white-base);\n  }\n\n  .alert__tag-content {\n    border-left: 1px solid var(--nile-colors-neutral-400);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 6px;\n\n    color: var(--nile-colors-dark-900);\n    font-family:  var(--nile-font-family-serif);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .alert__tag-image {\n    height: 24px;\n    width: 24px;\n    border-radius: 4px 0 0 4px;\n  }\n\n  .alert__prefix-img {\n    height: 24px;\n    border-radius: 4px;\n  }\n\n  .alert--no-content{\n    align-items:center ;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-toast/nile-toast.css.esm.js

@@ -1,12 +1,9 @@
-import{css as r}from"lit";const a=r`
+import{css as o}from"lit";const r=o`
   :host {
     display: contents;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
 
     /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: var(--nile-spacing-none);
+    margin: 0;
   }
 
   .alert {
@@ -15,11 +12,11 @@ import{css as r}from"lit";const a=r`
     position: relative;
     display: flex;
     align-items: flex-start;
-    border: solid 2px;
-    border-radius: var(--nile-radius-md, var(--ng-radius-xl));
+    border: solid 2px 2px;
+    border-radius: 8px;
     margin: inherit;
-    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
-    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding: 16px;
+    gap: 16px;
     width: max-content;
     min-width: 400px;
   }
@@ -30,8 +27,8 @@ import{css as r}from"lit";const a=r`
   }
 
   .alert__prefix-icon-container {
-    background-color: var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-sm);
+    background-color: red;
+    border-radius: 4px;
     box-sizing: border-box;
     display: flex;
     justify-content: center;
@@ -42,57 +39,57 @@ import{css as r}from"lit";const a=r`
     flex: 0 0 auto;
     display: flex;
     align-items: center;
-    font-size: var(--nile-type-scale-1);
+    font-size: 10px;
   }
 
   .alert--success {
-    border: 1px solid var(--nile-toast-color-border-success, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-success, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-success);
+    background: var(--nile-toast-color-background-success);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--success .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-success, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-success);
   }
 
   .alert--info {
-    border: 1px solid var(--nile-toast-color-border-info, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-info, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-info);
+    background: var(--nile-toast-color-background-info);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--info .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-info, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-info);
   }
 
   .alert--warning {
-    border: 1px solid var(--nile-toast-color-border-warning, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-warning, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-warning);
+    background: var(--nile-toast-color-background-warning);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--warning .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-warning, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-warning);
   }
 
   .alert--error {
-    border: 1px solid var(--nile-toast-color-border-error, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-error, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-error);
+    background: var(--nile-toast-color-background-error);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--error .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-error, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-error);
   }
 
   .alert--gray {
-    border: 1px solid var(--nile-toast-color-border-gray, var(--ng-colors-border-secondary-alt));
-    background: var(--nile-toast-color-background-gray, var(--ng-colors-bg-primary-alt));
-    box-shadow: var(--nile-toast-color-box-shadow, var(--ng-shadow-xs));
+    border: 1px solid var(--nile-toast-color-border-gray);
+    background: var(--nile-toast-color-background-gray);
+    box-shadow: var(--nile-toast-color-box-shadow);
   }
 
   .alert--gray .alert__prefix-icon-container {
-    background: var(--nile-toast-color-icon-background-color-gray, var(--ng-colors-bg-primary-alt));
+    background: var(--nile-toast-color-icon-background-color-gray);
   }
 
   .alert--black {
@@ -112,23 +109,25 @@ import{css as r}from"lit";const a=r`
     align-items: center;
     flex-direction: column;
     align-items: flex-start;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-display));
-    font-size: var(--nile-type-scale-3);
-    color: var(--nile-colors-dark-900);
-    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    font-family: var(--nile-font-family-serif);
+    font-size: 14px;
+    line-height: 20px;
+    color: black;
+    gap:3px;
   }
 
   .alert__message--title {
-    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semiboldibold));
-    color:var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-weight: 600;
+    color:var(--nile-colors-dark-900);
   }
 
   .alert__message--content {
-    font-weight:var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    color:var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    font-weight:400;
+    color:var(--nile-colors-dark-500);
   }
 
   .alert__message--content-only {
+    margin-top: 3px;
   }
 
   .alert__close-button {
@@ -140,14 +139,14 @@ import{css as r}from"lit";const a=r`
   .alert__tags {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    gap: 10px;
+    margin-top: 4px;
   }
 
   .alert__tag {
     height: 24px;
     display: flex;
-    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+    border-radius: 4px;
     border: 1px solid var(--nile-colors-neutral-400);
     background: var(--nile-colors-white-base);
   }
@@ -157,26 +156,26 @@ import{css as r}from"lit";const a=r`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-sm, var(--ng-spacing-sm));
+    padding: 0 6px;
 
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
-    font-family:  var(--nile-font-family-serif, var(--ng-font-family-display));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-dark-900);
+    font-family:  var(--nile-font-family-serif);
+    font-size: 14px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
+    font-weight: 400;
+    line-height: 20px;
     letter-spacing: 0.2px;
   }
 
   .alert__tag-image {
     height: 24px;
     width: 24px;
-    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));
+    border-radius: 4px 0 0 4px;
   }
 
   .alert__prefix-img {
     height: 24px;
-    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+    border-radius: 4px;
   }
 
   .alert--no-content{
@@ -186,4 +185,4 @@ import{css as r}from"lit";const a=r`
   [hidden] {
     display: none;
   }
-`;export{a as s};
+`;export{r as s};