Panel

A layout panel for side content, supporting information and contextual tool areas.

Import

import { Panel } from "@schukai/monster/source/components/layout/panel.mjs";

Source

View source code

Package

@schukai/monster

Since

3.54.0

The panel owns the scrolling surface so surrounding shell elements can stay stable.

Activity feed item 1

Activity feed item 2

Activity feed item 3

Activity feed item 4

Activity feed item 5

Introduction

The Monster Panel is a secondary layout surface for supporting content next to a main task. Use it for inspector panes, side notes, filters or additional controls that should stay visible without replacing the main area.

When to use Panel

Use it for contextual side content: Filters, metadata and tool collections fit naturally into panels.
Use it when the page has a clear main area: A panel works best as support, not as the whole experience.
Do not use it for temporary modal tasks: Overlays are better when the rest of the page should be paused.

Typical mistakes

Avoid overloading a panel with full-page workflows. Once the side area starts needing its own navigation, the layout usually wants a different structure.

Panel Simple

This panel keeps a long activity list inside a bounded area so the surrounding page layout stays stable.

09:15 Inventory sync completed for warehouse east.

09:22 Two draft orders waiting for manager review.

09:31 Carrier label batch created for afternoon pickup.

09:48 Refund queue reached the service level warning threshold.

10:02 Procurement note attached to the seasonal stock report.

10:14 Pricing job finished and updated 28 market-facing offers.

Javascript

import "@schukai/monster/source/components/layout/panel.mjs";
import "@schukai/monster/source/components/layout/popper.mjs";

HTML

<section style="display:grid;gap:var(--monster-space-4);block-size:22rem;min-block-size:22rem;">
  <div
    style="padding:var(--monster-space-4);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);border:1px solid var(--monster-color-border-primary-2);"
  >
    This panel keeps a long activity list inside a bounded area so the surrounding
    page layout stays stable.
  </div>
  <div
    style="min-block-size:0;padding:var(--monster-space-4);background:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2);border:1px solid var(--monster-color-border-secondary-2);"
  >
    <monster-panel id="panel-simple-demo">
      <div style="display:grid;gap:var(--monster-space-3);">
        <div style="padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">09:15 Inventory sync completed for warehouse east.</div>
        <div style="padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">09:22 Two draft orders waiting for manager review.</div>
        <div style="padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">09:31 Carrier label batch created for afternoon pickup.</div>
        <div style="padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">09:48 Refund queue reached the service level warning threshold.</div>
        <div style="padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">10:02 Procurement note attached to the seasonal stock report.</div>
        <div style="padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">10:14 Pricing job finished and updated 28 market-facing offers.</div>
      </div>
    </monster-panel>
  </div>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Command Center Panel

This example shows a realistic sidebar-like command center. The panel owns the scroll area while the page shell around it can stay fixed.

Command center feed

Use monster-panel when a sidebar or inspector should own the scrolling surface instead of pushing the full page.

Open incidents

Payment retry queue delayed
Shipping label webhook degraded

Next actions

Escalate finance errors first, then rerun the affected dispatch exports.

Owner notes

Keep the activity feed visible while the operator jumps between reports.

Javascript

import "@schukai/monster/source/components/layout/panel.mjs";

HTML

<section style="display:grid;gap:var(--monster-space-4);block-size:22rem;min-block-size:22rem;">
  <div
    style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2);border:1px solid var(--monster-color-border-secondary-2);"
  >
    <strong>Command center feed</strong>
    <p style="margin:0;">
      Use <code>monster-panel</code> when a sidebar or inspector should own the
      scrolling surface instead of pushing the full page.
    </p>
  </div>
  <div
    style="min-block-size:0;padding:var(--monster-space-4);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);border:1px solid var(--monster-color-border-primary-2);"
  >
    <monster-panel>
      <div style="display:grid;gap:var(--monster-space-4);">
        <div style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1);">
          <strong>Open incidents</strong>
          <ul style="margin:0;padding-left:1.25rem;">
            <li>Payment retry queue delayed</li>
            <li>Shipping label webhook degraded</li>
          </ul>
        </div>
        <div style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">
          <strong>Next actions</strong>
          <p style="margin:0;">Escalate finance errors first, then rerun the affected dispatch exports.</p>
        </div>
        <div style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);">
          <strong>Owner notes</strong>
          <p style="margin:0;">Keep the activity feed visible while the operator jumps between reports.</p>
        </div>
      </div>
    </monster-panel>
  </div>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The Monster Panel component is a flexible container that automatically adjusts its height based on the viewport and parent elements. Built using the Shadow DOM, it ensures consistent styling and behavior across different environments. The panel can be used as a standalone container or as part of more complex layouts.

Shadow DOM and Accessibility

By leveraging the Shadow DOM, the Monster Panel encapsulates its internal elements and styles, ensuring that they are unaffected by external scripts or styles. This approach guarantees reliable behavior while maintaining modularity. The component also ensures proper focus management, making it keyboard and screen reader accessible.

Customizing Through Exported Parts

The Monster Panel exposes specific exported parts for targeted customization using CSS. This allows developers to modify the panel's appearance without interfering with its core functionality.

Available Part Attributes

control: Represents the main container of the panel, including any slotted content.

Below is an example of how to style the panel using the CSS part selector:


monster-panel::part(control) {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Explanation of the Example

monster-panel::part(control): Styles the panel container with a white background, padding, and a subtle shadow effect.
monster-panel::part(control):hover: Enhances the panel's border and shadow when hovered for a dynamic visual effect.

Automatic Height Adjustment

The Monster Panel automatically adjusts its height based on the available viewport space. The height calculation considers:

Viewport dimensions
Distance from the top of the screen
Element padding, margins, and borders

The height can be fine-tuned using the heightAdjustment option, which allows developers to add or subtract a specific number of pixels.

Accessibility

The Monster Panel component is designed to ensure a smooth and inclusive experience:

Focus Management: Focus remains on the appropriate elements when navigating within the panel.
Screen Reader Support: The panel is screen reader compatible, ensuring accessibility for all users.

These features make the Monster Panel a reliable component for creating inclusive and accessible layouts.

HTML Structure

<monster-panel></monster-panel>

JavaScript Initialization

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

Exported

Panel

Derived from

CustomElement

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

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

heightAdjustment

string

Height adjustment

controlOverflow

string

auto

Overflow value applied to the control 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 CustomElement.

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

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Panel}

connectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

disconnectedCallback()

Returns

{void}

This method is called by the dom and should not be called directly.

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.