ContextError

Context Error Simple

import "@schukai/monster/source/components/form/context-error.mjs";

const element = document.getElementById("context-error-demo");
element.setErrorMessage("Please enter a valid email address.");<script type="module">import "@schukai/monster/source/components/form/context-error.mjs";

const element = document.getElementById("context-error-demo-run");
element.setErrorMessage("Please enter a valid email address.");</script>

<div style="display:grid;gap:0.75rem;">
  <label for="context-error-demo-input">Email</label>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <input
      id="context-error-demo-input"
      type="email"
      value="invalid-address"
      style="flex:1 1 auto;"
    />
    <monster-context-error id="context-error-demo">
      Please enter a valid email address.
    </monster-context-error>
  </div>
</div>

/** no additional stylesheet is defined **/

Context Error Live Validation

import "@schukai/monster/source/components/form/context-error.mjs";

const input = document.getElementById("context-error-live-input");
const error = document.getElementById("context-error-live-demo");
const status = document.getElementById("context-error-live-status");

const validate = () => {
  const value = input.value.trim();
  const valid = /^[a-z0-9-]+$/.test(value);

  if (valid) {
    error.resetErrorMessage();
    status.textContent = "Slug is valid and ready to use.";
    return;
  }

  error.setErrorMessage("Only lowercase letters, numbers, and dashes are allowed.");
  status.textContent = "Slug needs cleanup before you can save it.";
};

input.addEventListener("input", validate);
validate();<script type="module">import "@schukai/monster/source/components/form/context-error.mjs";

const input = document.getElementById("context-error-live-input-run");
const error = document.getElementById("context-error-live-demo-run");
const status = document.getElementById("context-error-live-status-run");

const validate = () => {
  const value = input.value.trim();
  const valid = /^[a-z0-9-]+$/.test(value);

  if (valid) {
    error.resetErrorMessage();
    status.textContent = "Slug is valid and ready to use.";
    return;
  }

  error.setErrorMessage("Only lowercase letters, numbers, and dashes are allowed.");
  status.textContent = "Slug needs cleanup before you can save it.";
};

input.addEventListener("input", validate);
validate();</script>

<div style="display:grid;gap:0.75rem;max-inline-size:30rem;">
  <label for="context-error-live-input">Project slug</label>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <input id="context-error-live-input" type="text" value="Monster Docs!" style="flex:1 1 auto;" />
    <monster-context-error id="context-error-live-demo"></monster-context-error>
  </div>
  <div id="context-error-live-status">Use lowercase letters, numbers, and dashes only.</div>
</div>

/** no additional stylesheet is defined **/

Component Design

The monster-context-error component is designed to display error messages in a flexible and visually appealing popper (popover). It uses the Shadow DOM for isolation, ensuring that its internal structure and styles remain independent of the global DOM.

The component combines an icon-based trigger with a dynamically positioned popper to provide contextual error information. It supports various customization options, including error message display duration, interaction modes, and placement configuration.

Shadow DOM and Structure

The monster-context-error component encapsulates its behavior and design using the Shadow DOM. The key internal elements include:

• Control Container: The wrapper element for the component.
• Error Icon: A hidden SVG icon that appears when an error message is set.
• Popper: A container for the error message content, dynamically positioned based on configuration.

The use of part attributes allows developers to customize the component's appearance without breaking its internal structure.

Customizing Through Exported Parts

The monster-context-error component exposes several parts for styling. These parts can be targeted using CSS for custom themes and designs:

• control: Targets the main wrapper element of the component.
• button: Styles the clickable error icon.
• popper: Controls the appearance of the error message popper.
• content: Targets the inner content section of the popper where the error message is displayed.

Example Custom Styling

monster-context-error::part(button) {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

monster-context-error::part(popper) {
    background-color: #fce4e4;
    color: #d32f2f;
    border: 1px solid #d32f2f;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

monster-context-error::part(content) {
    font-size: 14px;
    font-weight: 500;
}

Explanation:

• monster-context-error::part(button): Customizes the error icon button with pointer interactions.
• monster-context-error::part(popper): Styles the error message container with a red border and soft background.
• monster-context-error::part(content): Adjusts the text size and weight for readability.

Error Message Display

The monster-context-error component provides methods to manage error messages dynamically. The error icon becomes visible when an error message is set. Developers can control the behavior of the message display, including:

• Immediate Display: Show the error message instantly.
• Timed Display: Display the message for a specified duration.
• Reset: Hide and clear the error message.

Accessibility

The monster-context-error component is built with accessibility in mind:

• The error icon supports focus states for keyboard navigation.
• The popper content is screen-reader accessible and dynamically updated.
• ARIA roles and attributes are used to ensure proper semantic meaning for assistive tools.

Summary

The monster-context-error component provides a lightweight and highly customizable solution for displaying contextual error messages. With its Shadow DOM isolation, exported parts for styling, and dynamic behavior, it seamlessly integrates into forms or any UI requiring inline error feedback.