Board

Board Simple

import "@schukai/monster/source/components/layout/board.mjs";<script type="module">//import '@schukai/monster/source/components/layout/board.mjs';</script>

<section style="display:grid;gap:var(--monster-space-4);">
  <p style="margin:0;">
    The board distributes tiles into a responsive grid and keeps them draggable
    without introducing a second layout system.
  </p>
  <monster-board>
    <div style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);min-block-size:8rem;">
      <strong>Open Orders</strong>
      <span>18 orders waiting for packing.</span>
    </div>
    <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);min-block-size:8rem;">
      <strong>Shipments</strong>
      <span>6 labels generated in the last hour.</span>
    </div>
    <div style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-success-2);color:var(--monster-color-success-2);min-block-size:8rem;">
      <strong>Healthy Services</strong>
      <span>All three warehouse connectors are online.</span>
    </div>
    <div style="display:grid;gap:var(--monster-space-2);padding:var(--monster-space-4);background:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2);min-block-size:8rem;">
      <strong>Review Queue</strong>
      <span>2 supplier changes still need approval.</span>
    </div>
  </monster-board>
</section>

/** no additional stylesheet is defined **/

Kanban Board

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

<monster-board>
  <section style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);min-block-size:12rem;">
    <strong>Backlog</strong>
    <span>Supplier onboarding checklist</span>
    <span>Promo banner review</span>
  </section>
  <section style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);background:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2);min-block-size:12rem;">
    <strong>In Progress</strong>
    <span>Marketplace price sync</span>
    <span>Invoice export regression check</span>
  </section>
  <section style="display:grid;gap:var(--monster-space-3);padding:var(--monster-space-4);background:var(--monster-bg-color-success-2);color:var(--monster-color-success-2);min-block-size:12rem;">
    <strong>Done</strong>
    <span>Warehouse slot cleanup</span>
    <span>Carrier webhook retry fixed</span>
  </section>
</monster-board>

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which allows it to encapsulate its internal structure and styling. By using a shadow root, the component's internal elements—such as the board, grid, and parking area— are isolated from the rest of the webpage. This ensures that external styles or scripts cannot accidentally modify the layout, drag-and-drop behavior, or responsiveness of the grid structure.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal grid and layout logic is restricted. Developers cannot manipulate or style these internal elements from outside the component. This design helps ensure the consistency and integrity of the board's drag-and-drop logic and responsive behavior, avoiding potential conflicts caused by external modifications.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access to the component's internal structure, customization is still possible through exported parts. Specific parts of the component are made accessible for styling by being explicitly marked for export. These exported parts can be targeted and customized using CSS, allowing you to modify the appearance of the component without compromising its encapsulation.

Available Part Attributes

• control: This part represents the main control container of the board. It includes the interactive area where the grid and draggable items are displayed. Use this to style the visual structure and container area of the board.
• grid: This part represents the CSS grid layout used to position child elements. It handles drag-and-drop placement and dynamic cell management. You can style this part to define spacing, grid gaps, or overall layout appearance.

Below is an example of how to use CSS part attributes to customize different parts of the board control.

monster-board::part(control) {
    background-color: #fafafa;
    border-radius: 8px;
}

monster-board::part(grid) {
    gap: 10px;
    padding: 12px;
}

Explanation of the Example

• monster-board::part(control): Styles the container area of the board, giving it a soft background and rounded corners.
• monster-board::part(grid): Defines spacing and padding for the grid layout, which enhances the visual spacing of draggable elements.

Accessibility

Accessibility is a key consideration in the design of this component. It supports drag-and-drop interactions via accessible handles, and it is built to integrate with assistive technologies through semantic roles and attributes. The component ensures that users with diverse abilities, including those relying on keyboard navigation and screen readers, can interact with and rearrange board items in a meaningful and consistent way.