ContextSuccess

A context success control

Import

import { ContextSuccess } from "@schukai/monster/source/components/form/context-success.mjs";

Source

View source code

Package

@schukai/monster

Since

3.55.0

Verified domain

Domain ownership was verified and the DNS check passed.

Introduction

monster-context-success highlights successful validation or confirmed requirements close to the related field.

Key Features

Positive feedback: Communicates confirmed or completed states.
Inline success hint: Keeps the success message attached to the relevant field.
Popper-based details: Allows short confirmations or next-step guidance.

Context Success Domain

This example uses monster-context-success for a verified confirmation next to the field it belongs to.

Verified domain

Domain ownership was verified and the DNS check passed.

Javascript

import "@schukai/monster/source/components/form/context-success.mjs";<script type="module">import "@schukai/monster/source/components/form/context-success.mjs";</script>

HTML

<div style="display:flex;align-items:center;gap:0.5rem;">
  <label for="context-success-domain-demo">Verified domain</label>
  <input id="context-success-domain-demo" type="text" value="monsterjs.org" />
  <monster-context-success>
    Domain ownership was verified and the DNS check passed.
  </monster-context-success>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Context Success Checklist

This example documents success guidance for a completed workflow rather than a single validated field.

Deployment checklist

Monitoring, rollback, and communication steps are all complete.

Javascript

import "@schukai/monster/source/components/form/context-success.mjs";<script type="module">import "@schukai/monster/source/components/form/context-success.mjs";</script>

HTML

<div style="display:grid;gap:0.75rem;max-inline-size:30rem;">
  <label for="context-success-checklist-demo">Deployment checklist</label>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <input id="context-success-checklist-demo" type="text" value="All checks passed" />
    <monster-context-success>
      Monitoring, rollback, and communication steps are all complete.
    </monster-context-success>
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The success variant reuses the context popper structure and applies a dedicated success theme to the trigger icon.

Styling Hooks

classes.button: Sets the success theme.
::part(button): Styles the success indicator.
::part(content): Styles the confirmation copy.

HTML Structure

<monster-context-success></monster-context-success>

JavaScript Initialization

const element = document.createElement('monster-context-success');
document.body.appendChild(element);

Exported

ContextSuccess

Derived from

ContextBase

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the ContextBase.

Option

Type

Default

Description

templates

object

The templates for the control.

templates.main

string

undefined

The main template.

mode

string

auto

The mode of the popper. Possible values are `click`, `enter` and `hover`.

content

string

undefined

The content of the popper.

popper

object

undefined

The popper options.

popper.placement

string

undefined

The placement of the popper.

classes

object

Custom CSS classes.

classes.button

string

monster-theme-success-2

CSS class for the button element.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the ContextBase.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the ContextBase.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.