ContextNote

A context note control

Import

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

Source

View source code

Package

@schukai/monster

Since

3.55.0

Internal comment

This note is only relevant for internal handover and support workflows.

Introduction

monster-context-note is intended for side notes, process remarks, or record annotations that should stay accessible but visually secondary.

Key Features

Note-style tone: Uses a softer secondary emphasis.
Reusable inline helper: Works with labels, headings, and compact forms.
Non-blocking content: Keeps additional explanation out of the main form flow.

Context Note Handover

This example uses monster-context-note for process-specific internal remarks.

Internal comment

This note is only relevant for internal handover and support workflows.

Javascript

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

HTML

<div style="display:flex;align-items:center;gap:0.5rem;">
  <label for="context-note-handover-demo">Internal comment</label>
  <input id="context-note-handover-demo" type="text" placeholder="Handled by Team A" />
  <monster-context-note>
    This note is only relevant for internal handover and support workflows.
  </monster-context-note>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Context Note Review

This example documents note-style guidance for reviewer comments and short annotations.

Release checklist

Keep reviewer notes short here; the detailed discussion belongs in the ticket.

Javascript

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

HTML

<div style="display:grid;gap:0.75rem;max-inline-size:30rem;">
  <label for="context-note-review-demo">Release checklist</label>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <input id="context-note-review-demo" type="text" value="Reviewed by legal" />
    <monster-context-note>
      Keep reviewer notes short here; the detailed discussion belongs in the ticket.
    </monster-context-note>
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The note control shares the same popper architecture as the other context helpers but swaps the icon and theme to communicate an annotation state.

Styling Hooks

classes.button: Applies the note theme to the trigger.
::part(button): Styles the icon button.
::part(popper): Styles the note container.

HTML Structure

<monster-context-note></monster-context-note>

JavaScript Initialization

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

Exported

ContextNote

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-secondary-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.