@ukic/web-components 3.15.0 → 3.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"ic-toast.js","sourceRoot":"","sources":["../../../src/components/ic-toast/ic-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n  getSlot,\n  isPropDefined,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcActivationTypes, IcStatusVariants } from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n  tag: \"ic-toast\",\n  styleUrl: \"ic-toast.css\",\n  shadow: true,\n})\nexport class Toast {\n  private dismissTimeout: number;\n  private interactiveElements: ActionAreaElementTypes[] = [];\n  private neutralVariantLabel: string;\n  private timerRefreshInterval: number;\n  private focusInteractiveElement: boolean;\n  private shiftKeyPressed: boolean;\n\n  @Element() el: HTMLIcToastElement;\n\n  @State() isManual: boolean;\n  @State() timerProgress = 100;\n  @State() visible = false;\n\n  /**\n   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n   * (NOTE: Has a minimum value of `5000ms`)\n   */\n  @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n  /**\n   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n   */\n  @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n  /**\n   * How the toast will be dismissed. If manual will display a dismiss button.\n   */\n  @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n  @Watch(\"dismissMode\")\n  dismissModeChangeHandler(newValue: IcActivationTypes): void {\n    this.isManual = newValue === \"manual\";\n  }\n\n  /**\n   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\n\n  /**\n   * The variant of the toast being rendered\n   */\n  @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n  /**\n   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n  }\n\n  componentWillLoad(): void {\n    this.handleLongText(\n      this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n      !!this.message && this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n    );\n\n    if (this.autoDismissTimeout! < 5000) this.autoDismissTimeout = 5000;\n\n    if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n    this.isManual = this.dismissMode === \"manual\";\n\n    if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n    if (this.variant === \"neutral\") {\n      this.neutralVariantLabel =\n        this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n    }\n\n    if (this.isManual) {\n      const toastMessage: string = isPropDefined(this.message)\n        ? `. ${this.message}`\n        : \"\";\n      this.el.setAttribute(\n        \"aria-label\",\n        this.variant\n          ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n          : this.heading\n      );\n      (this.variant || this.message) &&\n        this.el.setAttribute(\n          \"aria-description\",\n          this.variant ? `${this.heading}${toastMessage}` : this.message || \"\"\n        );\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Toast\"\n    );\n  }\n\n  componentDidUpdate(): void {\n    if (this.focusInteractiveElement && this.isManual) {\n      this.resetAutoDismissTimer();\n\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n\n      this.focusInteractiveElement = false;\n      this.findNextInteractiveElement(this.shiftKeyPressed).setFocus();\n      this.shiftKeyPressed = false;\n    }\n  }\n\n  @Watch(\"visible\")\n  watchVisibleHandler(): void {\n    if (this.visible) {\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n    } else {\n      this.interactiveElements = [];\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismiss(): void {\n    this.visible = false;\n    this.resetAutoDismissTimer();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.visible) {\n      if (this.isManual) {\n        switch (ev.key) {\n          case \"Tab\":\n            ev.preventDefault();\n            this.findNextInteractiveElement(ev.shiftKey).setFocus();\n            break;\n          case \"Escape\":\n            !ev.repeat && this.dismissAction();\n            ev.stopImmediatePropagation();\n            break;\n        }\n      } else {\n        if (ev.key === \"Tab\") {\n          this.shiftKeyPressed = ev.shiftKey;\n          this.focusInteractiveElement = true;\n        }\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  @Listen(\"mouseleave\")\n  handleTimer(ev: MouseEvent): void {\n    switch (ev.type) {\n      case \"mouseenter\":\n        if (!this.isManual) {\n          this.resetAutoDismissTimer();\n        }\n        this.isManual = true;\n        break;\n      case \"mouseleave\":\n        if (this.dismissMode === \"automatic\") {\n          this.isManual = false;\n          this.interactiveElements = [];\n          if (this.visible) {\n            this.dismissTimeout = window.setTimeout(\n              this.dismissAction,\n              this.autoDismissTimeout\n            );\n            this.timerRefreshInterval = window.setInterval(\n              this.handleProgressChange,\n              AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n            );\n          }\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Used to display the individual toast.\n   * @returns The element that previously had focus before the toast appeared\n   */\n  @Method()\n  async setVisible(): Promise<HTMLElement | null> {\n    if (!this.visible) this.visible = true;\n    if (!this.isManual) {\n      this.dismissTimeout = window.setTimeout(\n        this.dismissAction,\n        this.autoDismissTimeout\n      );\n      this.timerRefreshInterval = window.setInterval(\n        this.handleProgressChange,\n        AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n      );\n      return null;\n    } else {\n      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n      return document.activeElement as HTMLElement;\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private handleProgressChange = () => {\n    this.timerProgress -=\n      (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout!) * 100;\n  };\n\n  private handleLongText(\n    headingTooLong: boolean,\n    messageTooLong?: boolean\n  ): void {\n    if (messageTooLong || headingTooLong) {\n      console.error(\n        `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n          headingTooLong && messageTooLong ? \" and \" : \"\"\n        }${\n          messageTooLong ? \"message\" : \"\"\n        }. Refer to character limits specified in the prop description`\n      );\n    }\n  }\n\n  private findNextInteractiveElement(\n    isBackwards: boolean\n  ): ActionAreaElementTypes {\n    const firstEl = this.interactiveElements[0];\n    const lastEl =\n      this.interactiveElements[this.interactiveElements.length - 1];\n\n    if (this.isActive(isBackwards ? firstEl : lastEl))\n      return isBackwards ? lastEl : firstEl;\n\n    let currentIndex = 0;\n\n    return this.interactiveElements.some((el, index) => {\n      if (!this.isActive(el)) return false;\n      currentIndex = index;\n      return true;\n    })\n      ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n      : firstEl;\n  }\n\n  private resetAutoDismissTimer(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n    this.timerProgress = 100;\n  }\n\n  private isActive(targetEl: HTMLElement): boolean {\n    return targetEl === this.el\n      ? !!this.el.shadowRoot!.activeElement\n      : document.activeElement === targetEl;\n  }\n\n  private onFocus = (): void => {\n    if (this.focusInteractiveElement) {\n      this.isManual = true;\n    }\n  };\n\n  private onBlur = (): void => {\n    this.handleTimer({ type: \"mouseleave\" } as MouseEvent);\n  };\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      visible,\n      isManual,\n      dismissButtonAriaLabel,\n    } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-toast-hidden\"]: !visible,\n          [`ic-toast-variant-${variant}`]: variant !== undefined,\n        }}\n        tabindex=\"0\"\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        role={isManual ? \"dialog\" : \"alert\"}\n        aria-live={isManual ? null : \"polite\"}\n      >\n        <div class=\"container\">\n          {variant && visible && (\n            <div class=\"toast-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                <slot name=\"neutral-icon\" />\n              ) : (\n                <span\n                  class=\"toast-icon\"\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n          )}\n          <div\n            class={{\n              [\"toast-content\"]: true,\n              [\"no-icon\"]:\n                variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n            }}\n          >\n            <div class=\"toast-text\">\n              <ic-typography variant=\"subtitle-large\" class=\"toast-heading\">\n                {visible && (isManual ? <h5>{heading}</h5> : <p>{heading}</p>)}\n              </ic-typography>\n              {message && (\n                <ic-typography variant=\"body\" class=\"toast-message\">\n                  {visible && <p>{message}</p>}\n                </ic-typography>\n              )}\n            </div>\n            {isSlotUsed(this.el, \"action\") && (\n              <div class=\"toast-action-container\">\n                <slot name=\"action\" />\n              </div>\n            )}\n          </div>\n          {!isManual ? (\n            <ic-loading-indicator\n              class=\"toast-dismiss-timer\"\n              theme=\"dark\"\n              monochrome\n              size=\"icon\"\n              progress={this.timerProgress}\n              description=\"Dismiss timer\"\n            ></ic-loading-indicator>\n          ) : (\n            <ic-button\n              id=\"dismiss-button\"\n              innerHTML={closeIcon}\n              onClick={this.dismissAction}\n              variant=\"icon-tertiary\"\n              aria-label={dismissButtonAriaLabel}\n            ></ic-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-toast.js","sourceRoot":"","sources":["../../../src/components/ic-toast/ic-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n  getSlot,\n  isPropDefined,\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n  IcActivationTypes,\n  IcStatusVariants,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/**\n * @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n */\n@Component({\n  tag: \"ic-toast\",\n  styleUrl: \"ic-toast.css\",\n  shadow: true,\n})\nexport class Toast {\n  private dismissTimeout: number;\n  private interactiveElements: ActionAreaElementTypes[] = [];\n  private neutralVariantLabel: string;\n  private timerRefreshInterval: number;\n  private focusInteractiveElement: boolean;\n  private shiftKeyPressed: boolean;\n\n  @Element() el: HTMLIcToastElement;\n\n  @State() isManual: boolean;\n  @State() timerProgress = 100;\n  @State() visible = false;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n   * (NOTE: Has a minimum value of `5000ms`)\n   */\n  @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n  /**\n   * If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n   */\n  @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n  /**\n   * How the toast will be dismissed. If manual will display a dismiss button.\n   */\n  @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n  @Watch(\"dismissMode\")\n  dismissModeChangeHandler(newValue: IcActivationTypes): void {\n    this.isManual = newValue === \"manual\";\n  }\n\n  /**\n   * The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The main body message of the toast. (NOTE: Should be no more than `140` characters)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n   */\n  @Prop() neutralIconAriaLabel?: string;\n\n  /**\n   * The variant of the toast being rendered\n   */\n  @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n  /**\n   * Is emitted when the user dismisses the toast\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n  }\n\n  componentWillLoad(): void {\n    this.handleLongText(\n      this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n      !!this.message && this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n    );\n\n    if (this.autoDismissTimeout! < 5000) this.autoDismissTimeout = 5000;\n\n    if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n    this.isManual = this.dismissMode === \"manual\";\n\n    if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n    if (this.variant === \"neutral\") {\n      this.neutralVariantLabel =\n        this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n    }\n\n    if (this.isManual) {\n      const toastMessage: string = isPropDefined(this.message)\n        ? `. ${this.message}`\n        : \"\";\n      this.el.setAttribute(\n        \"aria-label\",\n        this.variant\n          ? this.neutralVariantLabel || VARIANT_ICONS[this.variant].ariaLabel\n          : this.heading\n      );\n      (this.variant || this.message) &&\n        this.el.setAttribute(\n          \"aria-description\",\n          this.variant ? `${this.heading}${toastMessage}` : this.message || \"\"\n        );\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Toast\"\n    );\n  }\n\n  componentDidUpdate(): void {\n    if (this.focusInteractiveElement && this.isManual) {\n      this.resetAutoDismissTimer();\n\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n\n      this.focusInteractiveElement = false;\n      this.findNextInteractiveElement(this.shiftKeyPressed).setFocus();\n      this.shiftKeyPressed = false;\n    }\n  }\n\n  @Watch(\"visible\")\n  watchVisibleHandler(): void {\n    if (this.visible) {\n      const actionContent = getSlot(\n        this.el,\n        \"action\"\n      ) as ActionAreaElementTypes;\n      const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n      if (actionContent) this.interactiveElements.push(actionContent);\n      if (dismissButton) this.interactiveElements.push(dismissButton);\n    } else {\n      this.interactiveElements = [];\n    }\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleDismiss(): void {\n    this.visible = false;\n    this.resetAutoDismissTimer();\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeyboard(ev: KeyboardEvent): void {\n    if (this.visible) {\n      if (this.isManual) {\n        switch (ev.key) {\n          case \"Tab\":\n            ev.preventDefault();\n            this.findNextInteractiveElement(ev.shiftKey).setFocus();\n            break;\n          case \"Escape\":\n            !ev.repeat && this.dismissAction();\n            ev.stopImmediatePropagation();\n            break;\n        }\n      } else {\n        if (ev.key === \"Tab\") {\n          this.shiftKeyPressed = ev.shiftKey;\n          this.focusInteractiveElement = true;\n        }\n      }\n    }\n  }\n\n  @Listen(\"mouseenter\")\n  @Listen(\"mouseleave\")\n  handleTimer(ev: MouseEvent): void {\n    switch (ev.type) {\n      case \"mouseenter\":\n        if (!this.isManual) {\n          this.resetAutoDismissTimer();\n        }\n        this.isManual = true;\n        break;\n      case \"mouseleave\":\n        if (this.dismissMode === \"automatic\") {\n          this.isManual = false;\n          this.interactiveElements = [];\n          if (this.visible) {\n            this.dismissTimeout = window.setTimeout(\n              this.dismissAction,\n              this.autoDismissTimeout\n            );\n            this.timerRefreshInterval = window.setInterval(\n              this.handleProgressChange,\n              AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n            );\n          }\n        }\n        break;\n    }\n  }\n\n  /**\n   * @internal Used to display the individual toast.\n   * @returns The element that previously had focus before the toast appeared\n   */\n  @Method()\n  async setVisible(): Promise<HTMLElement | null> {\n    if (!this.visible) this.visible = true;\n    if (!this.isManual) {\n      this.dismissTimeout = window.setTimeout(\n        this.dismissAction,\n        this.autoDismissTimeout\n      );\n      this.timerRefreshInterval = window.setInterval(\n        this.handleProgressChange,\n        AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n      );\n      return null;\n    } else {\n      window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n      return document.activeElement as HTMLElement;\n    }\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private handleProgressChange = () => {\n    this.timerProgress -=\n      (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout!) * 100;\n  };\n\n  private handleLongText(\n    headingTooLong: boolean,\n    messageTooLong?: boolean\n  ): void {\n    if (messageTooLong || headingTooLong) {\n      console.error(\n        `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n          headingTooLong && messageTooLong ? \" and \" : \"\"\n        }${\n          messageTooLong ? \"message\" : \"\"\n        }. Refer to character limits specified in the prop description`\n      );\n    }\n  }\n\n  private findNextInteractiveElement(\n    isBackwards: boolean\n  ): ActionAreaElementTypes {\n    const firstEl = this.interactiveElements[0];\n    const lastEl =\n      this.interactiveElements[this.interactiveElements.length - 1];\n\n    if (this.isActive(isBackwards ? firstEl : lastEl))\n      return isBackwards ? lastEl : firstEl;\n\n    let currentIndex = 0;\n\n    return this.interactiveElements.some((el, index) => {\n      if (!this.isActive(el)) return false;\n      currentIndex = index;\n      return true;\n    })\n      ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n      : firstEl;\n  }\n\n  private resetAutoDismissTimer(): void {\n    window.clearTimeout(this.dismissTimeout);\n    window.clearInterval(this.timerRefreshInterval);\n    this.timerProgress = 100;\n  }\n\n  private isActive(targetEl: HTMLElement): boolean {\n    return targetEl === this.el\n      ? !!this.el.shadowRoot!.activeElement\n      : document.activeElement === targetEl;\n  }\n\n  private onFocus = (): void => {\n    if (this.focusInteractiveElement) {\n      this.isManual = true;\n    }\n  };\n\n  private onBlur = (): void => {\n    this.handleTimer({ type: \"mouseleave\" } as MouseEvent);\n  };\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      visible,\n      isManual,\n      dismissButtonAriaLabel,\n      theme,\n    } = this;\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-toast-hidden\"]: !visible,\n          [`ic-toast-variant-${variant}`]: variant !== undefined,\n        }}\n        tabindex=\"0\"\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n        role={isManual ? \"dialog\" : \"alert\"}\n        aria-live={isManual ? null : \"polite\"}\n      >\n        <div\n          class={{\n            [\"container\"]: true,\n            [`container-${variant}`]: variant !== undefined,\n          }}\n        >\n          {variant && visible && (\n            <div class=\"toast-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              {variant === \"neutral\" ? (\n                <slot name=\"neutral-icon\" />\n              ) : (\n                <span\n                  class=\"toast-icon\"\n                  innerHTML={VARIANT_ICONS[variant].icon}\n                ></span>\n              )}\n            </div>\n          )}\n          <div\n            class={{\n              [\"toast-content\"]: true,\n              [\"no-icon\"]:\n                variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n            }}\n          >\n            <div class=\"toast-text\">\n              <ic-typography variant=\"subtitle-large\" class=\"toast-heading\">\n                {visible && (isManual ? <h5>{heading}</h5> : <p>{heading}</p>)}\n              </ic-typography>\n              {message && (\n                <ic-typography variant=\"body\" class=\"toast-message\">\n                  {visible && <p>{message}</p>}\n                </ic-typography>\n              )}\n            </div>\n            {isSlotUsed(this.el, \"action\") && (\n              <div class=\"toast-action-container\">\n                <slot name=\"action\" />\n              </div>\n            )}\n          </div>\n          {!isManual ? (\n            <ic-loading-indicator\n              class=\"toast-dismiss-timer\"\n              theme=\"dark\"\n              monochrome\n              size=\"icon\"\n              progress={this.timerProgress}\n              description=\"Dismiss timer\"\n            ></ic-loading-indicator>\n          ) : (\n            <ic-button\n              id=\"dismiss-button\"\n              innerHTML={closeIcon}\n              onClick={this.dismissAction}\n              variant=\"icon-tertiary\"\n              aria-label={dismissButtonAriaLabel}\n            ></ic-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-toast/ic-toast.stories.js

@@ -10,6 +10,7 @@ const defaultArgs = {
   variant: "neutral",
   actionSlot: "action",
   neutralIconSlot: "neutral-icon",
+  theme: "inherit",
 };
 
 export default {
@@ -18,7 +19,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html`<button onclick="func()">Display toast</button>
       <script>
         var toastRegion = document.querySelector("ic-toast-region");
@@ -35,7 +36,7 @@ export const Default = {
 };
 
 export const WithVariant = {
-  render: (args) =>
+  render: () =>
     html`<button onclick="func()">Display toast</button>
       <script>
         var toastRegion = document.querySelector("ic-toast-region");
@@ -57,7 +58,7 @@ export const WithVariant = {
 };
 
 export const MultilineMessage = {
-  render: (args) =>
+  render: () =>
     html`<button onclick="func()">Display toast</button>
       <script>
         var toastRegion = document.querySelector("ic-toast-region");
@@ -78,7 +79,7 @@ export const MultilineMessage = {
 };
 
 export const SlottedActionElements = {
-  render: (args) =>
+  render: () =>
     html`<button onclick="func()">Display toast 1</button>
       <button onclick="func2()">Display toast 2</button>
       <script>
@@ -115,7 +116,7 @@ export const SlottedActionElements = {
 };
 
 export const AutoDismiss = {
-  render: (args) =>
+  render: () =>
     html`<button onclick="func()">Display toast 1</button>
       <button onclick="func2()">Display toast 2</button>
       <script>
@@ -152,7 +153,7 @@ export const AutoDismiss = {
 };
 
 export const CustomNeutralIconAndDismissAriaLabel = {
-  render: (args) =>
+  render: () =>
     html`<button onclick="func()">Display toast</button>
       <script>
         var toastRegion = document.querySelector("ic-toast-region");
@@ -188,7 +189,7 @@ export const CustomNeutralIconAndDismissAriaLabel = {
 };
 
 export const ExampleOnPage = {
-  render: (args) =>
+  render: () =>
     html` <script>
         var toastRegion = document.querySelector("ic-toast-region");
         function func() {
@@ -317,6 +318,8 @@ export const ExampleOnPage = {
   name: "Example on page",
 };
 
+const inlineRadioSelector = "inline-radio";
+
 export const Playground = {
   render: (args) =>
     html`<button onclick="func()">Display toast</button>
@@ -337,6 +340,7 @@ export const Playground = {
           auto-dismiss-timeout=${args.autoDismissTimeout}
           neutral-icon-aria-label=${args.neutralIconAriaLabel}
           dismiss-button-aria-label=${args.dismissButtonAriaLabel}
+          theme=${args.theme}
         >
           <ic-button slot=${args.actionSlot} appearance="light"
             >Click me</ic-button
@@ -363,7 +367,7 @@ export const Playground = {
       options: ["manual", "automatic"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -371,7 +375,7 @@ export const Playground = {
       options: ["neutral", "info", "warning", "error", "success", "ai", ""],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -390,6 +394,14 @@ export const Playground = {
         type: "select",
       },
     },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
   },
 
   name: "Playground",

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

@@ -50,7 +50,7 @@ const defaultIconArgs = {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle"></ic-toggle-button>
       <script>
         var toggle = document.querySelector("ic-toggle-button");
@@ -63,13 +63,13 @@ export const Default = {
 };
 
 export const Checked = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle" checked="true"></ic-toggle-button>`,
   name: "Checked",
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle" disabled="true"></ic-toggle-button>
       <ic-toggle-button
         label="Toggle"
@@ -81,7 +81,7 @@ export const Disabled = {
 };
 
 export const WithIcon = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle">
       <svg
         slot="icon"
@@ -102,7 +102,7 @@ export const WithIcon = {
 };
 
 export const Sizes = {
-  render: (args) =>
+  render: () =>
     html`<div style="padding: 6px">
         <ic-toggle-button label="Toggle" size="small"></ic-toggle-button>
       </div>
@@ -117,7 +117,7 @@ export const Sizes = {
 };
 
 export const WithBadge = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle">
         <ic-badge label="1" slot="badge" variant="success"></ic-badge>
       </ic-toggle-button>
@@ -129,7 +129,7 @@ export const WithBadge = {
 };
 
 export const Monochrome = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button
       label="Toggle"
       monochrome="true"
@@ -139,7 +139,7 @@ export const Monochrome = {
 };
 
 export const FullWidth = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button
       label="Toggle"
       full-width="true"
@@ -149,7 +149,7 @@ export const FullWidth = {
 };
 
 export const Loading = {
-  render: (args) =>
+  render: () =>
     html`<div style="padding: 6px">
         <ic-toggle-button label="Toggle" loading="true"></ic-toggle-button>
         <ic-toggle-button
@@ -252,7 +252,7 @@ export const Loading = {
 };
 
 export const IconOnly = {
-  render: (args) =>
+  render: () =>
     html`<div style="padding:6px 10px; width:fit-content">
         <ic-toggle-button
           variant="icon"
@@ -367,7 +367,7 @@ export const IconOnly = {
 };
 
 export const IconRight = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle" icon-placement="right">
       <svg
         slot="icon"
@@ -388,7 +388,7 @@ export const IconRight = {
 };
 
 export const IconTop = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle" icon-placement="top">
       <svg
         slot="icon"
@@ -409,7 +409,7 @@ export const IconTop = {
 };
 
 export const TooltipPlacement = {
-  render: (args) =>
+  render: () =>
     html`<div style="padding:100px 10px; width:fit-content">
       <ic-toggle-button
         variant="icon"
@@ -471,7 +471,7 @@ export const TooltipPlacement = {
 };
 
 export const HideOutline = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button label="Toggle" outline="false"></ic-toggle-button>`,
 
   name: "Hide outline",

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

@@ -32,7 +32,7 @@ export default {
 };
 
 export const SelectType = {
-  render: (args) => html`
+  render: () => html`
     <ic-typography>Single and manual</ic-typography>
     <ic-toggle-button-group
       select-type="single"
@@ -68,7 +68,7 @@ export const SelectType = {
 };
 
 export const Sizes = {
-  render: (args) => html`
+  render: () => html`
     <ic-typography>Default</ic-typography>
     <ic-toggle-button-group
       label="Label for single and manual"
@@ -139,7 +139,7 @@ export const Sizes = {
 };
 
 export const Monochrome = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button-group
       monochrome="true"
       accessible-label="Single and manual select toggle group"
@@ -153,7 +153,7 @@ export const Monochrome = {
 };
 
 export const Disabled = {
-  render: (args) =>
+  render: () =>
     html`<ic-typography>Disabled</ic-typography>
       <ic-toggle-button-group
         disabled="true"
@@ -168,7 +168,7 @@ export const Disabled = {
 };
 
 export const Loading = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button-group
         loading="true"
         accessible-label="Single and manual select toggle group"
@@ -192,7 +192,7 @@ export const Loading = {
 };
 
 export const WithIcons = {
-  render: (args) =>
+  render: () =>
     html`<ic-typography>Icon only</ic-typography>
       <ic-toggle-button-group
         variant="icon"
@@ -379,7 +379,7 @@ export const WithIcons = {
 };
 
 export const HideOutline = {
-  render: (args) =>
+  render: () =>
     html`<ic-toggle-button-group
       select-type="single"
       accessible-label="Hide outline toggle group"

package/dist/collection/components/ic-tooltip/ic-tooltip.stories.js

@@ -15,7 +15,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) =>
+  render: () =>
     html`<ic-tooltip
         label="This is a description of the button"
         id="ic-tooltip-1"
@@ -32,7 +32,7 @@ export const Default = {
 };
 
 export const UsingExternalMethod = {
-  render: (args) =>
+  render: () =>
     html`<script>
         let display = true;
         document
@@ -58,7 +58,7 @@ export const UsingExternalMethod = {
 };
 
 export const DisabledHover = {
-  render: (args) =>
+  render: () =>
     html`<ic-tooltip
       label="This shows 'Code' has been copied"
       id="ic-tooltip-test-button-disable-hover"
@@ -76,7 +76,7 @@ export const DisabledHover = {
 };
 
 export const TopPlacements = {
-  render: (args) =>
+  render: () =>
     html` <div style="margin: 40px">
       <ic-tooltip
         placement="top-start"
@@ -109,7 +109,7 @@ export const TopPlacements = {
 };
 
 export const BottomPlacements = {
-  render: (args) =>
+  render: () =>
     html` <div style="margin: 40px">
       <ic-tooltip
         placement="bottom-start"
@@ -142,7 +142,7 @@ export const BottomPlacements = {
 };
 
 export const RightPlacements = {
-  render: (args) =>
+  render: () =>
     html` <div style="margin: 40px">
       <ic-tooltip
         placement="right-start"
@@ -175,7 +175,7 @@ export const RightPlacements = {
 };
 
 export const LeftPlacements = {
-  render: (args) =>
+  render: () =>
     html` <div style="margin-left: 400px">
       <ic-tooltip
         placement="left-start"
@@ -208,7 +208,7 @@ export const LeftPlacements = {
 };
 
 export const Truncation = {
-  render: (args) =>
+  render: () =>
     html`<ic-tooltip
       label="This is a body of text that is truncated to three lines within a tooltip. It has been truncated based on the max-lines property. The number of lines in the text is clamped to the number passed through the max-lines property."
       max-lines="3"
@@ -223,7 +223,7 @@ export const Truncation = {
 };
 
 export const DarkBackground = {
-  render: (args) =>
+  render: () =>
     html`<div style="height: 100px;background-color:#333333;">
       <ic-tooltip
         label="This is a description of the button"
@@ -237,7 +237,7 @@ export const DarkBackground = {
 };
 
 export const ChangingLabel = {
-  render: (args) =>
+  render: () =>
     html`<script>
         var icButton = document.querySelector("#testbutton");
         function handleClick() {
@@ -270,7 +270,7 @@ export const ChangingLabel = {
 };
 
 export const PositioningStrategy = {
-  render: (args) =>
+  render: () =>
     html` <script>
         var switchEl = document.querySelector("ic-switch");
         var tooltipEl = document.querySelector("ic-tooltip");

package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js

@@ -21,7 +21,7 @@ export default {
 };
 
 export const AppIconAndTitle = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation app-title="Application Name">
       <svg
         slot="app-icon"
@@ -46,7 +46,7 @@ export const AppIconAndTitle = {
 };
 
 export const SlottedTitleLink = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation>
       <a slot="app-title" href="/">Application Name</a>
       <a slot="short-app-title" href="/">App name</a>
@@ -74,7 +74,7 @@ export const SlottedTitleLink = {
 };
 
 export const StatusAndVersion = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       status="alpha"
@@ -103,7 +103,7 @@ export const StatusAndVersion = {
 };
 
 export const WithSearch = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
         app-title="Application Name"
         status="alpha"
@@ -148,7 +148,7 @@ export const WithSearch = {
 };
 
 export const WithIcons = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       status="alpha"
@@ -257,7 +257,7 @@ export const WithIcons = {
 };
 
 export const LongAppTitle = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application with a long name"
       status="alpha-beta-gamma-delta-epsilon"
@@ -310,7 +310,7 @@ export const LongAppTitle = {
 };
 
 export const WithNavigation = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       status="alpha"
@@ -390,7 +390,7 @@ export const WithNavigation = {
 };
 
 export const UsingUnnamedSlots = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       status="alpha"
@@ -428,7 +428,7 @@ export const UsingUnnamedSlots = {
 };
 
 export const WithGroupedNavigation = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       status="alpha"
@@ -520,7 +520,7 @@ export const WithGroupedNavigation = {
 };
 
 export const ContentCenterAligned = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       status="alpha"
@@ -600,7 +600,7 @@ export const ContentCenterAligned = {
 };
 
 export const ContentLeftAligned = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       status="alpha"
@@ -680,7 +680,7 @@ export const ContentLeftAligned = {
 };
 
 export const Brand = {
-  render: (args) =>
+  render: () =>
     html`<ic-theme brand-color="rgb(27, 60, 121)" id="brand-story-ic-theme">
       <ic-top-navigation
         app-title="Application Name"
@@ -806,7 +806,7 @@ export const Brand = {
 };
 
 export const LongSingleWordAppTitle = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Applicationwithareallyreallylongsinglewordname"
       status="alpha"
@@ -859,7 +859,7 @@ export const LongSingleWordAppTitle = {
 };
 
 export const ShortTitle = {
-  render: (args) =>
+  render: () =>
     html`<ic-top-navigation
       app-title="Application Name"
       short-app-title="App Name"
@@ -887,7 +887,7 @@ export const ShortTitle = {
 };
 
 export const TopNavResizedEvent = {
-  render: (args) =>
+  render: () =>
     html`<script>
         var topNav = document.querySelector("ic-top-navigation");
         topNav.addEventListener("icTopNavResized", function (event) {

package/dist/collection/components/ic-typography/ic-typography.stories.js

@@ -16,7 +16,7 @@ export default {
 };
 
 export const Default = {
-  render: (args) => html`<ic-typography>I am typography</ic-typography>`,
+  render: () => html`<ic-typography>I am typography</ic-typography>`,
   name: "Default",
 };
 

package/dist/collection/patterns/top-nav-content-footer.stories.js

@@ -5,7 +5,7 @@ export default {
 };
 
 export const SingleColumnWithTopNavigationAndFooter = {
-  render: (args) =>
+  render: () =>
     html`<div>
       <div style="display: flex; flex-direction: column; min-height: 100vh;">
         <ic-top-navigation