lit-material-components

v1.0.7

Published

a month ago

Material Design components built with Lit Element

Downloads

0High
0Medium
0Low

bahrus

lit web-components material-design mui

Lit Material Components

A Material Design component library built with Lit Element, implementing components matching the MUI React library API.

Features

🎨 Material Design components matching MUI's API
🚀 Built with Lit Element for fast, lightweight web components
📦 Tree-shakeable and modular
🎯 TypeScript support
🔧 Customizable through CSS custom properties
♿ Accessible by default

Installation

npm install
npm run build

Usage

The components export only the class definitions. You need to register them with custom element names in your application:

import { Button, TextField, TextareaAutosize, Checkbox } from 'lit-material-components';

// Register components with your preferred names
customElements.define('my-button', Button);
customElements.define('my-text-field', TextField);
customElements.define('my-textarea-autosize', TextareaAutosize);
customElements.define('my-checkbox', Checkbox);

Then use them in your HTML:

<my-button variant="contained" color="primary">Click Me</my-button>
<my-text-field label="Email" type="email"></my-text-field>
<my-textarea-autosize label="Comments" placeholder="Enter your comments..." minRows="3"></my-textarea-autosize>
<my-checkbox checked color="primary"></my-checkbox>

Available Components

Layout

Box - Flexible layout component with spacing, alignment, and styling utilities
Container - Responsive container component with centered content and max-width constraints
Grid - Flexible 12-column grid system with responsive breakpoints and spacing
Stack - One-dimensional layout component for arranging elements with consistent spacing

Navigation

AppBar - Top app bar with title, navigation, and action buttons
BottomNavigation - Bottom navigation bar for mobile apps with action buttons
Breadcrumbs - Navigation aid showing the current location within a hierarchy
Drawer - Side navigation panel with temporary, persistent, and permanent variants
Link - Styled links with Material Design principles and multiple variants
Menu - Dropdown menus with keyboard navigation, submenus, and positioning options
Stepper - Step-by-step navigation for multi-step processes with horizontal/vertical layouts
Tabs - Tab navigation with horizontal/vertical orientation and multiple variants

Form Controls

Autocomplete - Searchable dropdown with single/multiple selection
Button - Material button with variants (text, contained, outlined)
ButtonGroup - Group of buttons with shared styling and layout
Checkbox - Checkbox with indeterminate state support
Fab - Floating Action Button for primary actions
Radio - Radio button
Switch - Toggle switch
NumberField - Numeric input with increment/decrement controls
TextField - Text input with variants (outlined, filled, standard)
TextareaAutosize - Multi-line text input that automatically adjusts height based on content
ToggleButton - Toggle button for on/off states with grouping support
TransferList - Move items between two lists with selection controls
Select - Dropdown select
Skeleton - Placeholder loading component with multiple variants and animations
Slider - Range slider
Snackbar - Brief messages and notifications with actions and auto-hide
SpeedDial - Floating action button that reveals related actions when activated

Data Display

Accordion - Expandable panels for organizing content with summary and details sections
Avatar - User profile picture or initials in circular, rounded, or square format
Badge - Small status indicator that appears on top of content
ImageList - Grid layout for displaying collections of images with multiple variants and title bars
List - Flexible list component with ListItem, ListItemText, ListItemIcon, etc.
Typography - Text with Material Design typography styles
Chip - Compact elements for tags, filters, etc.
Divider - Horizontal or vertical divider
Paper - Container with elevation

Feedback

Alert - Alert messages with severity levels
CircularProgress - Circular loading indicator
LinearProgress - Linear loading indicator
Progress - Unified progress component supporting both linear and circular variants

Surfaces

Card - Flexible card container with CardHeader, CardMedia, CardContent, and CardActions
Paper - Elevated surface container

Utils

Backdrop - Semi-transparent overlay for modals and loading states
ClickAwayListener - Utility component for detecting clicks outside of elements
CssBaseline - Global CSS reset and normalization for consistent styling
ScopedCssBaseline - Scoped CSS reset and normalization for specific content areas
Modal - Foundation component for creating modal dialogs and overlays
IconButton - Button for icons
Dialog - Modal dialog with DialogTitle, DialogContent, DialogActions

Data Display

Table - Data table with TableHead, TableBody, TableFooter, TableRow
TableCell - Table cell with sorting and alignment options
TableContainer - Scrollable table wrapper
TablePagination - Table pagination controls
TableSortLabel - Sortable column header label

Component Examples

Button

<my-button variant="contained" color="primary" size="large">
  Submit
</my-button>

Properties:

variant: 'text' | 'contained' | 'outlined'
color: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
size: 'small' | 'medium' | 'large'
disabled: boolean
fullWidth: boolean

TextField

<my-text-field 
  label="Username" 
  variant="outlined"
  helperText="Enter your username"
  required
></my-text-field>

Properties:

label: string
value: string
variant: 'outlined' | 'filled' | 'standard'
type: 'text' | 'password' | 'email' | 'number'
error: boolean
helperText: string
disabled: boolean
required: boolean

TextareaAutosize

<!-- Basic Textarea Autosize -->
<my-textarea-autosize 
  label="Comments" 
  variant="outlined"
  placeholder="Enter your comments..."
  minRows="3"
  maxRows="8"
></my-textarea-autosize>

<!-- With Helper Text -->
<my-textarea-autosize 
  label="Feedback" 
  variant="filled"
  placeholder="Please provide feedback..."
  helperText="Maximum 500 characters"
  minRows="2"
  maxRows="6"
  fullWidth
></my-textarea-autosize>

<!-- With Validation -->
<my-textarea-autosize 
  label="Required Field" 
  variant="outlined"
  placeholder="This field is required..."
  error
  helperText="This field cannot be empty"
  required
></my-textarea-autosize>

<!-- Different Resize Options -->
<my-textarea-autosize 
  label="Resizable Textarea" 
  variant="outlined"
  placeholder="Can be resized manually..."
  resize="vertical"
  minRows="3"
  maxRows="10"
></my-textarea-autosize>

<!-- Pre-filled Content -->
<my-textarea-autosize 
  label="Article Content" 
  variant="outlined"
  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
  minRows="4"
  maxRows="12"
  fullWidth
></my-textarea-autosize>

Properties:

value: string - Current text content
label: string - Input label text
placeholder: string - Placeholder text when empty
variant: 'outlined' | 'filled' | 'standard' - Visual style variant (default: 'outlined')
minRows: number - Minimum number of rows to display (default: 1)
maxRows: number - Maximum number of rows before scrolling (default: Infinity)
resize: 'none' | 'both' | 'horizontal' | 'vertical' - Manual resize options (default: 'none')
size: 'small' | 'medium' - Component size (default: 'medium')
disabled: boolean - Disable the textarea
readonly: boolean - Make textarea read-only
required: boolean - Mark as required field
error: boolean - Show error state styling
helperText: string - Helper or error text below the textarea
fullWidth: boolean - Make textarea fill container width
name: string - Form field name attribute
id: string - Element ID attribute

Auto-sizing Behavior:

Automatic Height: Textarea height adjusts automatically as content changes
Row Constraints: Use minRows and maxRows to control size limits
Smooth Transitions: Height changes are animated for better UX
Scroll Handling: Shows scrollbar when content exceeds maxRows
Performance: Uses shadow DOM technique for efficient height calculation

Events:

input: Fired on every character input (detail: { value, originalEvent })
change: Fired when value changes and focus is lost (detail: { value, originalEvent })
focus: Fired when textarea gains focus (detail: { originalEvent })
blur: Fired when textarea loses focus (detail: { originalEvent })
keydown: Fired on key press (detail: { key, code, originalEvent })
keyup: Fired on key release (detail: { key, code, originalEvent })

Methods:

focus(): Programmatically focus the textarea
blur(): Programmatically blur the textarea
select(): Select all text in the textarea
setSelectionRange(start, end, direction?): Set text selection range

Usage Patterns:

Comments & Reviews: Multi-line text input with automatic sizing
Form Fields: Long text inputs that grow with content
Message Composition: Chat or email message input areas
Content Editing: Article or blog post content areas
Feedback Forms: User feedback and survey responses

Accessibility:

Proper label association with for attribute
ARIA attributes for error states and descriptions
Keyboard navigation support (Tab, Shift+Tab)
Screen reader compatibility with helper text
Focus management and visual indicators

Responsive Design:

Mobile-optimized touch targets and font sizes
Prevents zoom on iOS devices with appropriate font size
Responsive width with fullWidth property
Adapts to container constraints

Autocomplete

<my-autocomplete 
  label="Choose option"
  placeholder="Type to search..."
  variant="outlined"
  multiple
></my-autocomplete>

Properties:

options: any[] - Array of options to choose from
label: string - Input label
placeholder: string - Input placeholder text
multiple: boolean - Allow multiple selections
disabled: boolean - Disable the component
loading: boolean - Show loading indicator
freeSolo: boolean - Allow custom values not in options
clearOnEscape: boolean - Clear input on Escape key
disableClearable: boolean - Hide clear button
size: 'small' | 'medium' - Component size
variant: 'outlined' | 'filled' | 'standard' - Input variant
getOptionLabel: (option: any) => string - Custom option label function
isOptionEqualToValue: (option: any, value: any) => boolean - Custom equality check
filterOptions: (options: any[], state: any) => any[] - Custom filtering function

ButtonGroup

<my-button-group variant="outlined" color="primary" orientation="horizontal">
  <my-button>One</my-button>
  <my-button>Two</my-button>
  <my-button>Three</my-button>
</my-button-group>

Properties:

variant: 'text' | 'contained' | 'outlined' - Button style variant
color: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' - Color theme
size: 'small' | 'medium' | 'large' - Button size
orientation: 'horizontal' | 'vertical' - Layout direction
disabled: boolean - Disable all buttons in group
disableElevation: boolean - Remove shadow from contained buttons
fullWidth: boolean - Make buttons fill container width

Badge

<my-badge badgeContent="4" color="primary">
  <div>Content with badge</div>
</my-badge>

Properties:

badgeContent: string - Text or number to display in badge
color: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' - Badge color
variant: 'standard' | 'dot' - Badge style (content or just a dot)
anchorOrigin: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' - Badge position
invisible: boolean - Hide the badge
showZero: boolean - Show badge when content is "0"
max: number - Maximum number to display (shows "max+" when exceeded)
overlap: 'rectangular' | 'circular' - Adjust positioning for circular content

Avatar

<my-avatar src="profile.jpg" alt="John Doe"></my-avatar>
<my-avatar alt="Jane Smith" color="primary"></my-avatar>
<my-avatar color="secondary">
  <svg><!-- icon --></svg>
</my-avatar>

Properties:

src: string - Image source URL
alt: string - Alternative text (used for initials if no image)
variant: 'circular' | 'rounded' | 'square' - Avatar shape
size: 'small' | 'medium' | 'large' | string - Predefined or custom size
color: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' - Background color for text/icon avatars

Content Priority:

Image (if src provided and loads successfully)
Slotted content (icons, custom elements)
Initials from alt text
Default person icon

ImageList

<!-- Standard Image List -->
<my-image-list variant="standard" cols="4" gap="4" rowHeight="164">
  <my-image-list-item src="image1.jpg" alt="Image 1">
    <my-image-list-item-bar title="Image Title" subtitle="by @photographer"></my-image-list-item-bar>
  </my-image-list-item>
  <my-image-list-item src="image2.jpg" alt="Image 2">
    <my-image-list-item-bar title="Another Image" subtitle="by @artist"></my-image-list-item-bar>
  </my-image-list-item>
</my-image-list>

<!-- Quilted Image List -->
<my-image-list variant="quilted" cols="4" gap="4">
  <my-image-list-item src="featured.jpg" alt="Featured" featured>
    <my-image-list-item-bar title="Featured Image" subtitle="Large display"></my-image-list-item-bar>
  </my-image-list-item>
  <my-image-list-item src="regular1.jpg" alt="Regular 1">
    <my-image-list-item-bar title="Regular Image"></my-image-list-item-bar>
  </my-image-list-item>
</my-image-list>

<!-- Masonry Image List -->
<my-image-list variant="masonry" cols="3" gap="4">
  <my-image-list-item src="tall-image.jpg" alt="Tall Image">
    <my-image-list-item-bar title="Tall Image" subtitle="Natural height"></my-image-list-item-bar>
  </my-image-list-item>
  <my-image-list-item src="square-image.jpg" alt="Square Image">
    <my-image-list-item-bar title="Square Image"></my-image-list-item-bar>
  </my-image-list-item>
</my-image-list>

<!-- Woven Image List -->
<my-image-list variant="woven" cols="3" gap="4">
  <my-image-list-item src="image1.jpg" alt="Image 1">
    <my-image-list-item-bar title="Woven Layout"></my-image-list-item-bar>
  </my-image-list-item>
  <my-image-list-item src="image2.jpg" alt="Image 2">
    <my-image-list-item-bar title="Alternating Sizes"></my-image-list-item-bar>
  </my-image-list-item>
</my-image-list>

<!-- Image List with Title Bars -->
<my-image-list variant="standard" cols="2" gap="4" rowHeight="200">
  <my-image-list-item src="image1.jpg" alt="Image 1">
    <my-image-list-item-bar title="Bottom Bar" subtitle="Default position" position="bottom">
      <my-icon-button slot="action" style="color: rgba(255, 255, 255, 0.54);">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
      </my-icon-button>
    </my-image-list-item-bar>
  </my-image-list-item>
  
  <my-image-list-item src="image2.jpg" alt="Image 2">
    <my-image-list-item-bar title="Top Bar" subtitle="Top position" position="top">
      <my-icon-button slot="action" style="color: rgba(255, 255, 255, 0.54);">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
          <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3z"/>
        </svg>
      </my-icon-button>
    </my-image-list-item-bar>
  </my-image-list-item>
  
  <my-image-list-item src="image3.jpg" alt="Image 3">
    <my-image-list-item-bar title="Below Image" position="below"></my-image-list-item-bar>
  </my-image-list-item>
</my-image-list>

<!-- Custom Grid Sizing -->
<my-image-list variant="quilted" cols="4" gap="4">
  <my-image-list-item src="large.jpg" alt="Large Item" cols="2" rows="2">
    <my-image-list-item-bar title="Large Item" subtitle="2x2 grid"></my-image-list-item-bar>
  </my-image-list-item>
  <my-image-list-item src="wide.jpg" alt="Wide Item" cols="2">
    <my-image-list-item-bar title="Wide Item" subtitle="2x1 grid"></my-image-list-item-bar>
  </my-image-list-item>
  <my-image-list-item src="regular.jpg" alt="Regular Item">
    <my-image-list-item-bar title="Regular" subtitle="1x1 grid"></my-image-list-item-bar>
  </my-image-list-item>
</my-image-list>

ImageList Properties:

variant: 'masonry' | 'quilted' | 'standard' | 'woven' - Layout variant (default: 'standard')
cols: number - Number of columns (default: 2)
gap: number - Gap between items using 8px unit system (default: 4)
rowHeight: number - Row height in pixels for standard/woven variants (default: 164)

ImageListItem Properties:

src: string - Image source URL
alt: string - Alternative text for the image
featured: boolean - Make item larger in quilted variant (2x2 grid)
cols: number - Number of columns to span (default: 1)
rows: number - Number of rows to span (default: 1)

ImageListItemBar Properties:

title: string - Primary title text
subtitle: string - Secondary subtitle text
position: 'bottom' | 'top' | 'below' - Bar position relative to image (default: 'bottom')

Layout Variants:

standard: All items same size in a regular grid
quilted: Featured items are larger (2x2), others are regular size
masonry: Items maintain aspect ratio, creating a Pinterest-like layout
woven: Alternating pattern with different aspect ratios (1:1 and 2:1)

Title Bar Positions:

bottom: Overlay at bottom of image with gradient background (default)
top: Overlay at top of image with gradient background
below: Below the image without overlay background

Features:

Multiple Layout Variants: Four different layout patterns for various use cases
Responsive Grid System: Configurable columns and spacing
Image Loading States: Built-in loading and error state handling
Title Bars: Overlay or below-image title and subtitle support
Action Buttons: Support for action buttons in title bars
Custom Grid Sizing: Individual items can span multiple columns/rows
Hover Effects: Subtle image scaling on hover
Accessibility: Proper alt text and semantic HTML structure
Performance: Efficient CSS Grid and Flexbox layouts
Error Handling: Graceful fallback for failed image loads

Usage Patterns:

Standard: Photo galleries, product grids, uniform content
Quilted: Featured content with supporting images
Masonry: Pinterest-style layouts, varying image sizes
Woven: Alternating layouts for visual interest
Use appropriate cols count based on screen size and content
Include descriptive alt text for all images
Use title bars for image metadata and actions
Consider loading performance with large image sets
Use gap to control visual density
Match rowHeight to your image aspect ratios

Responsive Considerations:

Reduce cols on smaller screens for better mobile experience
Consider touch-friendly sizing for mobile interactions
Use CSS media queries to adjust cols and gap responsively
Ensure title bars remain readable on small screens
Test image loading performance on slower connections

Accessibility:

Provide meaningful alt text for all images
Use semantic HTML structure with proper image elements
Ensure sufficient color contrast in title bars
Support keyboard navigation for interactive elements
Consider screen reader compatibility for image descriptions

List

<my-list>
  <my-list-item-button>
    <my-list-item-icon>
      <svg><!-- icon --></svg>
    </my-list-item-icon>
    <my-list-item-text primary="Primary text" secondary="Secondary text"></my-list-item-text>
    <my-list-item-secondary-action>
      <my-icon-button>×</my-icon-button>
    </my-list-item-secondary-action>
  </my-list-item-button>
</my-list>

List Properties:

dense: boolean - Compact spacing
disablePadding: boolean - Remove default padding
subheader: string - List section header

ListItem Properties:

dense: boolean - Compact spacing
disabled: boolean - Disable interaction
divider: boolean - Show bottom border
selected: boolean - Show selected state
alignItems: 'flex-start' | 'center' - Vertical alignment

ListItemButton Properties:

Same as ListItem plus click handling and hover effects

ListItemText Properties:

primary: string - Primary text content
secondary: string - Secondary text content
inset: boolean - Add left padding for alignment

Sub-components:

ListItemIcon - Container for icons with proper spacing
ListItemAvatar - Container for avatars with proper spacing
ListItemSecondaryAction - Right-aligned action area

Fab (Floating Action Button)

<my-fab color="primary">
  <svg slot="icon"><!-- icon --></svg>
</my-fab>

<my-fab variant="extended" color="secondary">
  <svg slot="icon"><!-- icon --></svg>
  Add Item
</my-fab>

Properties:

color: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' - Button color
size: 'small' | 'medium' | 'large' - Button size
variant: 'circular' | 'extended' - Shape (circular for icon-only, extended for icon + text)
disabled: boolean - Disable the button
href: string - Make FAB act as a link

Usage Notes:

Use slot="icon" for the icon content
Extended FABs can contain both icon and text
Typically positioned fixed in the bottom-right corner of the screen
Primary action should use color="primary"

FormControlLabel

<!-- Basic Form Control Label -->
<my-form-control-label label="Accept terms and conditions">
  <my-checkbox slot="control" color="primary"></my-checkbox>
</my-form-control-label>

<!-- With Switch -->
<my-form-control-label label="Enable notifications">
  <my-switch slot="control" color="primary" checked></my-switch>
</my-form-control-label>

<!-- Radio Button Group -->
<my-form-control-label label="Option 1" name="radio-group" value="option1">
  <my-radio slot="control" color="primary" name="radio-group" value="option1" checked></my-radio>
</my-form-control-label>

<my-form-control-label label="Option 2" name="radio-group" value="option2">
  <my-radio slot="control" color="primary" name="radio-group" value="option2"></my-radio>
</my-form-control-label>

<!-- Different Label Placements -->
<my-form-control-label label="Label at start" labelPlacement="start">
  <my-checkbox slot="control" color="primary"></my-checkbox>
</my-form-control-label>

<my-form-control-label label="Label at top" labelPlacement="top">
  <my-checkbox slot="control" color="primary"></my-checkbox>
</my-form-control-label>

<my-form-control-label label="Label at bottom" labelPlacement="bottom">
  <my-checkbox slot="control" color="primary"></my-checkbox>
</my-form-control-label>

<!-- States -->
<my-form-control-label label="Required field" required>
  <my-checkbox slot="control" color="primary"></my-checkbox>
</my-form-control-label>

<my-form-control-label label="Disabled field" disabled>
  <my-checkbox slot="control" color="primary" disabled></my-checkbox>
</my-form-control-label>

<!-- Sizes -->
<my-form-control-label label="Small size" size="small">
  <my-checkbox slot="control" color="primary" size="small"></my-checkbox>
</my-form-control-label>

<!-- Colors -->
<my-form-control-label label="Secondary color" color="secondary">
  <my-checkbox slot="control" color="secondary"></my-checkbox>
</my-form-control-label>

Properties:

label: string - Label text to display
labelPlacement: 'end' | 'start' | 'top' | 'bottom' - Position of label relative to control (default: 'end')
disabled: boolean - Disable the entire form control
required: boolean - Mark the field as required (adds asterisk)
value: string - Value associated with the form control
name: string - Name attribute for form submission
id: string - ID attribute for the form control
size: 'small' | 'medium' - Size variant (default: 'medium')
color: 'primary' | 'secondary' | 'default' - Color theme for focus states (default: 'primary')

Control Slot:

Use slot="control" on the form control element (checkbox, radio, switch, etc.)
The control element should be placed as a child of the FormControlLabel
Supports any form control element including custom components

Label Placements:

end: Label appears after the control (default, most common)
start: Label appears before the control
top: Label appears above the control
bottom: Label appears below the control

Events:

click: Fired when the label or control is clicked (detail: { value, name, originalEvent })
focus: Fired when the control gains focus (detail: { originalEvent })
blur: Fired when the control loses focus (detail: { originalEvent })
keydown: Fired on key press (detail: { key, code, originalEvent })

Methods:

focus(): Programmatically focus the form control
blur(): Programmatically blur the form control
click(): Programmatically trigger a click on the form control

Usage Patterns:

Checkbox Groups: Multiple independent selections
Radio Button Groups: Single selection from multiple options
Switch Controls: On/off toggles with descriptive labels
Form Validation: Required field indicators and error states
Accessibility: Proper label association for screen readers

Accessibility:

Automatically associates label with form control
Supports keyboard navigation (Space, Enter)
Proper ARIA attributes for disabled and required states
Screen reader compatible with descriptive labels
Focus management between label and control

Form Integration:

Works with native HTML form elements
Supports custom form control components
Proper form submission with name/value pairs
Validation state propagation to child controls
Event bubbling for form handling

Responsive Design:

Adapts label placement for mobile devices
Touch-friendly click targets
Proper spacing for different screen sizes
High contrast mode support

NumberField

<my-number-field 
  label="Quantity" 
  variant="outlined"
  value="5"
  min="1"
  max="100"
  step="1"
></my-number-field>

Properties:

label: string - Input label
value: number - Current numeric value
variant: 'outlined' | 'filled' | 'standard' - Input style
min: number - Minimum allowed value
max: number - Maximum allowed value
step: number - Increment/decrement step size (default: 1)
hideSteppers: boolean - Hide increment/decrement buttons
inputMode: 'numeric' | 'decimal' - Mobile keyboard type
placeholder: string - Placeholder text
disabled: boolean - Disable the input
required: boolean - Mark as required field
error: boolean - Show error state
helperText: string - Helper or error text
fullWidth: boolean - Fill container width
size: 'small' | 'medium' - Input size

Features:

Automatic value clamping to min/max bounds
Keyboard navigation (Arrow Up/Down)
Custom step increments (integers or decimals)
Mobile-optimized numeric keyboards
Validation and error states

ToggleButton & ToggleButtonGroup

<!-- Individual toggle button -->
<my-toggle-button value="bold" selected>
  <svg><!-- bold icon --></svg>
</my-toggle-button>

<!-- Exclusive group (single selection) -->
<my-toggle-button-group value="left" color="primary">
  <my-toggle-button value="left">Left</my-toggle-button>
  <my-toggle-button value="center">Center</my-toggle-button>
  <my-toggle-button value="right">Right</my-toggle-button>
</my-toggle-button-group>

<!-- Multiple selection group -->
<my-toggle-button-group exclusive="false" color="primary">
  <my-toggle-button value="bold">Bold</my-toggle-button>
  <my-toggle-button value="italic">Italic</my-toggle-button>
</my-toggle-button-group>

ToggleButton Properties:

selected: boolean - Toggle state
value: string - Button value for identification
disabled: boolean - Disable the button
color: 'standard' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
size: 'small' | 'medium' | 'large' - Button size
fullWidth: boolean - Fill container width

ToggleButtonGroup Properties:

value: string - Selected value (exclusive mode)
values: string[] - Selected values (multiple mode)
exclusive: boolean - Single vs multiple selection (default: true)
color: 'standard' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
size: 'small' | 'medium' | 'large' - Size for all buttons
orientation: 'horizontal' | 'vertical' - Layout direction
disabled: boolean - Disable all buttons
fullWidth: boolean - Make buttons fill container width

Events:

ToggleButton: toggle event with { value, selected }
ToggleButtonGroup: change event with { value } (exclusive) or { values } (multiple)

TransferList

<my-transfer-list 
  leftTitle="Available"
  rightTitle="Selected"
></my-transfer-list>

Properties:

left: TransferListItem[] - Items in the left list
right: TransferListItem[] - Items in the right list
leftTitle: string - Title for left list (default: "Available")
rightTitle: string - Title for right list (default: "Selected")
disabled: boolean - Disable all interactions
dense: boolean - Compact spacing

TransferListItem Interface:

interface TransferListItem {
  id: string;        // Unique identifier
  label: string;     // Display text
  disabled?: boolean; // Individual item disabled state
}

Features:

Move selected items between lists
Move all items at once
Individual item selection with checkboxes
Header checkbox for select/deselect all
Disabled items support
Item count display
Keyboard accessible

Events:

change event with { left: TransferListItem[], right: TransferListItem[] }

Progress

<!-- Linear Progress -->
<my-progress variant="linear" mode="determinate" value="75" color="primary"></my-progress>
<my-progress variant="linear" mode="indeterminate" color="secondary"></my-progress>
<my-progress variant="linear" mode="buffer" value="60" buffer="80" color="primary"></my-progress>

<!-- Circular Progress -->
<my-progress variant="circular" mode="determinate" value="75" color="primary" size="medium"></my-progress>
<my-progress variant="circular" mode="indeterminate" color="secondary" size="large"></my-progress>

<!-- With Labels -->
<my-progress variant="linear" mode="determinate" value="85" showLabel color="success"></my-progress>
<my-progress variant="circular" mode="determinate" value="65" showLabel label="65% Complete" color="info"></my-progress>

Properties:

variant: 'linear' | 'circular' - Progress indicator type
mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' - Progress mode
value: number - Progress value (0-100) for determinate mode
buffer: number - Buffer value (0-100) for buffer mode
color: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' - Color theme
size: 'small' | 'medium' | 'large' | number - Size (circular only)
thickness: number - Stroke thickness for circular progress (default: 3.6)
showLabel: boolean - Display progress label
label: string - Custom label text (defaults to percentage for determinate mode)

Progress Modes:

Determinate: Shows specific progress value (0-100%)
Indeterminate: Shows ongoing activity without specific progress
Buffer: Shows buffering progress with primary and buffer values (linear only)
Query: Shows query/loading state with reverse animation (linear only)

Features:

Unified API for both linear and circular progress indicators
Multiple progress modes with smooth animations
Customizable colors, sizes, and thickness
Optional progress labels with custom text
Responsive design with proper accessibility
Buffer mode for streaming/loading scenarios

Skeleton

<!-- Text Skeletons -->
<my-skeleton variant="text" width="100%"></my-skeleton>
<my-skeleton variant="text" width="80%"></my-skeleton>
<my-skeleton variant="text" width="60%"></my-skeleton>

<!-- Shape Skeletons -->
<my-skeleton variant="rectangular" width="200px" height="118px"></my-skeleton>
<my-skeleton variant="rounded" width="150px" height="80px"></my-skeleton>
<my-skeleton variant="circular" width="40px" height="40px"></my-skeleton>

<!-- Animation Types -->
<my-skeleton variant="text" animation="pulse"></my-skeleton>
<my-skeleton variant="text" animation="wave"></my-skeleton>
<my-skeleton variant="text" animation="false"></my-skeleton>

<!-- Card Skeleton Example -->
<my-card style="padding: 16px;">
  <div style="display: flex; gap: 15px; margin-bottom: 16px;">
    <my-skeleton variant="circular" width="40px" height="40px"></my-skeleton>
    <div style="flex: 1;">
      <my-skeleton variant="text" width="60%"></my-skeleton>
      <my-skeleton variant="text" width="40%"></my-skeleton>
    </div>
  </div>
  <my-skeleton variant="rectangular" width="100%" height="200px"></my-skeleton>
  <my-skeleton variant="text" width="100%"></my-skeleton>
  <my-skeleton variant="text" width="80%"></my-skeleton>
</my-card>

Properties:

variant: 'text' | 'rectangular' | 'rounded' | 'circular' - Skeleton shape variant
animation: 'pulse' | 'wave' | false - Animation type (default: 'pulse')
width: string - Custom width (CSS value like '100%', '200px')
height: string - Custom height (CSS value like '20px', '100px')

Skeleton Variants:

Text: For text content with automatic height and scaling
Rectangular: For images, cards, or rectangular content areas
Rounded: Similar to rectangular but with rounded corners
Circular: For avatars, profile pictures, or circular elements

Animation Types:

Pulse: Gentle opacity animation (default)
Wave: Shimmer effect that moves across the skeleton
False: No animation for static placeholders

Features:

Multiple shape variants for different content types
Customizable animations including pulse, wave, and static
Flexible sizing with CSS width and height properties
Proper accessibility attributes for screen readers
Lightweight and performant animations
Material Design styling and proportions
Responsive design that adapts to container sizes

Usage Patterns:

Use text skeletons for loading text content
Use rectangular/rounded skeletons for images and media
Use circular skeletons for avatars and profile pictures
Combine multiple skeletons to create complex loading layouts
Match skeleton dimensions to actual content for smooth transitions

Snackbar

<!-- Basic Snackbar -->
<my-snackbar 
  open 
  message="This is a basic snackbar message"
  autoHideDuration="6000">
</my-snackbar>

<!-- Snackbar with Action -->
<my-snackbar 
  open 
  message="Message sent" 
  action="UNDO"
  closable>
</my-snackbar>

<!-- Severity Variants -->
<my-snackbar open message="Success message" severity="success" variant="filled"></my-snackbar>
<my-snackbar open message="Info message" severity="info" variant="standard"></my-snackbar>
<my-snackbar open message="Warning message" severity="warning" variant="outlined"></my-snackbar>
<my-snackbar open message="Error message" severity="error" variant="filled"></my-snackbar>

<!-- Positioning -->
<my-snackbar open message="Top center" anchorOrigin="top-center"></my-snackbar>
<my-snackbar open message="Bottom right" anchorOrigin="bottom-right"></my-snackbar>

<!-- Persistent Snackbar -->
<my-snackbar 
  open 
  message="This won't auto-hide" 
  autoHideDuration="0" 
  closable>
</my-snackbar>

Properties:

open: boolean - Whether the snackbar is visible
message: string - The message to display
autoHideDuration: number - Auto-hide delay in milliseconds (0 = no auto-hide, default: 6000)
anchorOrigin: 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right' - Position
variant: 'standard' | 'filled' | 'outlined' - Visual style variant
severity: 'success' | 'info' | 'warning' | 'error' | '' - Severity level with icon and colors
closable: boolean - Show close button for manual dismissal
action: string - Action button text
transitionDuration: string - CSS transition duration (default: '225ms')

Anchor Origins:

bottom-left: Bottom left corner (default)
bottom-center: Bottom center of screen
bottom-right: Bottom right corner
top-left: Top left corner
top-center: Top center of screen
top-right: Top right corner

Variants:

Standard: Default dark background with white text
Filled: Colored background based on severity
Outlined: White background with colored border and text

Severity Levels:

Success: Green color with checkmark icon
Info: Blue color with info icon
Warning: Orange color with warning icon
Error: Red color with error icon

Events:

close: Fired when snackbar closes (detail: { reason: 'timeout' | 'clickaway' })
action: Fired when action button is clicked (detail: { action: string })

Features:

Auto-hide with customizable duration
Manual dismissal with close button
Action buttons for user interaction
Multiple positioning options
Severity levels with icons and colors
Smooth enter/exit animations
Mobile-responsive design
Proper accessibility with ARIA attributes
Event handling for close and action interactions
Support for multiple simultaneous snackbars

Usage Patterns:

Use for brief confirmations and feedback messages
Include actions for undo operations or related tasks
Position based on content and user workflow
Use severity levels to communicate message importance
Keep messages concise and actionable
Provide manual close option for important messages

Breadcrumbs

<!-- Basic Breadcrumbs -->
<my-breadcrumbs></my-breadcrumbs>

<!-- With Custom Items -->
<my-breadcrumbs id="nav-breadcrumbs"></my-breadcrumbs>

<!-- Custom Separator -->
<my-breadcrumbs separator="›"></my-breadcrumbs>
<my-breadcrumbs separator="•"></my-breadcrumbs>

<!-- With Icons -->
<my-breadcrumbs id="icon-breadcrumbs"></my-breadcrumbs>

<!-- Collapsed Breadcrumbs -->
<my-breadcrumbs 
  maxItems="4" 
  itemsBeforeCollapse="1" 
  itemsAfterCollapse="1">
</my-breadcrumbs>

<!-- JavaScript Setup -->
<script>
  const breadcrumbs = document.getElementById('nav-breadcrumbs');
  breadcrumbs.items = [
    { label: 'Home', href: '/home' },
    { label: 'Products', href: '/products' },
    { label: 'Laptops', href: '/laptops' },
    { label: 'MacBook Pro' } // Current page (no href)
  ];

  const iconBreadcrumbs = document.getElementById('icon-breadcrumbs');
  iconBreadcrumbs.items = [
    { label: 'Home', href: '/home', icon: 'home' },
    { label: 'Documents', href: '/docs', icon: 'folder' },
    { label: 'Projects', href: '/projects', icon: 'folder' },
    { label: 'README.md', icon: 'file' }
  ];

  // Handle breadcrumb clicks
  breadcrumbs.addEventListener('breadcrumb-click', (e) => {
    console.log('Clicked:', e.detail.item.label);
    // Navigate to e.detail.item.href
  });
</script>

Properties:

items: BreadcrumbItem[] - Array of breadcrumb items
separator: string - Separator character between items (default: '/')
maxItems: number - Maximum items to show before collapsing (default: 8)
itemsBeforeCollapse: number - Items to show before collapse button (default: 1)
itemsAfterCollapse: number - Items to show after collapse button (default: 1)
expandText: boolean - Show expand text instead of ellipsis (default: false)

BreadcrumbItem Interface:

interface BreadcrumbItem {
  label: string;        // Display text
  href?: string;        // Link URL (optional)
  disabled?: boolean;   // Disable interaction
  icon?: string;        // Icon name (optional)
}

Built-in Icons:

home: Home icon
folder: Folder icon
file: File icon
settings: Settings icon

Collapse Behavior:

When items.length > maxItems, breadcrumbs are collapsed
Shows first itemsBeforeCollapse items
Shows collapse button (...) with dropdown menu
Shows last itemsAfterCollapse items
Dropdown shows all collapsed items

Events:

breadcrumb-click: Fired when breadcrumb is clicked (detail: { item, index })

Features:

Automatic collapsing for long breadcrumb trails
Custom separators and icons
Dropdown menu for collapsed items
Keyboard navigation support
Mobile-responsive design
Proper semantic HTML with nav and ol elements
ARIA attributes for accessibility
Click event handling with item details
Disabled state support

Usage Patterns:

Use for hierarchical navigation (file systems, categories)
Show current location within deep navigation structures
Provide quick access to parent levels
Include icons for better visual hierarchy
Keep labels concise but descriptive
Use href for navigable items, omit for current page
Consider collapsing for deep hierarchies (>5 levels)

Link

<!-- Basic Links -->
<my-link href="/home">Home</my-link>
<my-link href="/about" color="primary">About</my-link>
<my-link href="/contact" color="secondary">Contact</my-link>

<!-- Color Variants -->
<my-link href="/error" color="error">Error Link</my-link>
<my-link href="/warning" color="warning">Warning Link</my-link>
<my-link href="/info" color="info">Info Link</my-link>
<my-link href="/success" color="success">Success Link</my-link>

<!-- Underline Options -->
<my-link href="/none" underline="none">No Underline</my-link>
<my-link href="/hover" underline="hover">Hover Underline</my-link>
<my-link href="/always" underline="always">Always Underline</my-link>

<!-- Variants -->
<my-link href="/text" variant="text" color="primary">Text Variant</my-link>
<my-link href="/outlined" variant="outlined" color="primary">Outlined Variant</my-link>
<my-link href="/contained" variant="contained" color="primary">Contained Variant</my-link>

<!-- External Links -->
<my-link href="https://example.com" target="_blank">External Link</my-link>
<my-link href="https://github.com" target="_blank" color="secondary">GitHub</my-link>

<!-- Button Component -->
<my-link component="button" color="primary">Button Link</my-link>
<my-link component="button" variant="outlined" color="secondary">Action Button</my-link>

<!-- Disabled Links -->
<my-link href="/disabled" disabled>Disabled Link</my-link>
<my-link href="/disabled" variant="contained" color="primary" disabled>Disabled Button</my-link>

<!-- Event Handling -->
<my-link id="action-link" component="button" color="success">Click Me</my-link>

<script>
  document.getElementById('action-link').addEventListener('click', (e) => {
    console.log('Link clicked:', e.detail);
    // Handle action
  });
</script>

Properties:

href: string - Link URL (not used when component="button")
target: string - Link target (_blank, _self, etc.)
rel: string - Link relationship (auto-set for external links)
color: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' | 'inherit' | 'textPrimary' | 'textSecondary' - Link color
variant: 'text' | 'outlined' | 'contained' - Visual style variant
underline: 'none' | 'hover' | 'always' - Underline behavior
disabled: boolean - Disable the link
component: 'a' | 'button' - HTML element to render

Color Options:

primary: Primary theme color (default)
secondary: Secondary theme color
error: Error/danger color (red)
warning: Warning color (orange)
info: Information color (blue)
success: Success color (green)
inherit: Inherit parent color
textPrimary: Primary text color
textSecondary: Secondary text color

Variants:

text: Simple colored text link (default)
outlined: Link with border and background on hover
contained: Button-like link with filled background

Underline Behavior:

none: No underline
hover: Underline on hover (default)
always: Always underlined

Events:

click: Fired when link is clicked (detail: { originalEvent })

Features:

Automatic external link detection with icon
Proper rel attributes for external links (noopener noreferrer)
Button component option for action links
Disabled state support
Focus management and keyboard navigation
Material Design color system
Hover and active states
Accessibility attributes

Usage Patterns:

Use href for navigation links
Use component="button" for action links that don't navigate
Use target="_blank" for external links (icon added automatically)
Use appropriate colors to indicate link purpose
Use variant="contained" for prominent call-to-action links
Use underline="always" for links within text content
Use disabled for temporarily unavailable links

Accordion

<!-- Basic Accordion -->
<my-accordion>
  <my-accordion-summary slot="summary">
    <my-typography variant="h6">Panel Title</my-typography>
  </my-accordion-summary>
  <my-accordion-details slot="details">
    <my-typography>
      Panel content goes here. This can include any HTML content.
    </my-typography>
  </my-accordion-details>
</my-accordion>

<!-- Outlined Variant -->
<my-accordion variant="outlined">
  <my-accordion-summary slot="summary">
    <my-typography variant="h6">Outlined Panel</my-typography>
  </my-accordion-summary>
  <my-accordion-details slot="details">
    <my-typography>Content for outlined accordion.</my-typography>
  </my-accordion-details>
</my-accordion>

<!-- With Actions -->
<my-accordion>
  <my-accordion-summary slot="summary">
    <my-typography variant="h6">Panel with Actions</my-typography>
  </my-accordion-summary>
  <my-accordion-details slot="details">
    <my-typography>Panel content with action buttons.</my-typography>
    <my-accordion-actions>
      <my-button variant="outlined">Cancel</my-button>
      <my-button variant="contained" color="primary">Save</my-button>
    </my-accordion-actions>
  </my-accordion-details>
</my-accordion>

<!-- Controlled Accordion -->
<my-accordion id="panel1" expanded>
  <my-accordion-summary slot="summary">
    <my-typography variant="h6">Controlled Panel</my-typography>
  </my-accordion-summary>
  <my-accordion-details slot="details">
    <my-typography>This panel's state is controlled by JavaScript.</my-typography>
  </my-accordion-details>
</my-accordion>

<!-- Disabled Accordion -->
<my-accordion disabled>
  <my-accordion-summary slot="summary">
    <my-typography variant="h6">Disabled Panel</my-typography>
  </my-accordion-summary>
  <my-accordion-details slot="details">
    <my-typography>This panel cannot be expanded.</my-typography>
  </my-accordion-details>
</my-accordion>

<!-- Complex Content -->
<my-accordion>
  <my-accordion-summary slot="summary">
    <my-typography variant="h6">Form Panel</my-typography>
  </my-accordion-summary>
  <my-accordion-details slot="details">
    <div style="display: flex; flex-direction: column; gap: 16px;">
      <my-text-field label="Name" variant="outlined"></my-text-field>
      <my-text-field label="Email" variant="outlined" type="email"></my-text-field>
      <div style="display: flex; align-items: center; gap: 8px;">
        <my-checkbox></my-checkbox>
        <my-typography>Subscribe to newsletter</my-typography>
      </div>
    </div>
  </my-accordion-details>
</my-accordion>

<!-- JavaScript Event Handling -->
<script>
  const accordion = document.getElementById('panel1');
  
  // Handle accordion state changes
  accordion.addEventListener('change', (e) => {
    console.log('Accordion changed:', {
      expanded: e.detail.expanded,
      previousExpanded: e.detail.previousExpanded
    });
  });
  
  // Programmatically control accordion
  accordion.expanded = true; // Expand
  accordion.expanded = false; // Collapse
</script>

Accordion Properties:

expanded: boolean - Whether the accordion is expanded (default: false)
disabled: boolean - Disable the accordion interaction
disableGutters: boolean - Remove default margins and shadows
variant: 'elevation' | 'outlined' - Visual style variant (default: 'elevation')
square: boolean - Remove border radius for square corners
TransitionComponent: string - Transition component name (default: 'collapse')
TransitionProps: string - Additional transition properties

AccordionSummary Properties:

expandIcon: string - Icon name for expand/collapse indicator (default: 'expand_more')
disabled: boolean - Disable the summary interaction
iconButtonProps: string - Additional props for the icon button

AccordionDetails Properties:

disablePadding: boolean - Remove default padding from details content

AccordionActions Properties:

disableSpacing: boolean - Remove default padding from actions container

Accordion Variants:

elevation: Default variant with shadow and margins (Material Design standard)
outlined: Bordered variant without shadows, suitable for grouped accordions

Events:

change: Fired when accordion expands/collapses (detail: { expanded, previousExpanded })
summary-click: Fired when summary is clicked (detail: { originalEvent })

Features:

Smooth Animations: Expand/collapse transitions with Material Design timing
Keyboard Navigation: Full keyboard support with Enter/Space to toggle
Accessibility: Proper ARIA attributes and focus management
Flexible Content: Support for any HTML content in details section
Action Buttons: Built-in support for action buttons in accordion footer
Controlled State: Programmatic control of expanded state
Visual Variants: Elevation and outlined styles for different use cases
Responsive Design: Adapts to container width and mobile devices
Nested Support: Accordions can contain other complex components
Event System: Comprehensive event handling for state changes

Usage Patterns:

Use for FAQ sections, settings panels, and content organization
Group related accordions with the outlined variant
Include action buttons for forms and interactive content
Use controlled state for exclusive accordion behavior (only one open)
Disable accordions for read-only or unavailable content
Combine with other components like forms, lists, and cards
Use appropriate typography hierarchy in summary titles
Keep summary text concise and descriptive
Consider mobile users when designing accordion content

Accessibility:

Proper ARIA attributes (aria-expanded, role="button")
Keyboard navigation support (Enter, Space)
Focus management and visual focus indicators
Screen reader compatible with semantic HTML structure
High contrast support for expand/collapse icons

Box

<!-- Basic Box -->
<my-box p="2" bgcolor="grey-100">
  Basic box with padding and background
</my-box>

<!-- Flexbox Layout -->
<my-box display="flex" gap="2" justifyContent="space-between" alignItems="center">
  <my-box flex="1" p="2" bgcolor="primary" color="white">Item 1</my-box>
  <my-box flex="2" p="2" bgcolor="secondary" color="white">Item 2</my-box>
  <my-box flex="1" p="2" bgcolor="success" color="white">Item 3</my-box>
</my-box>

<!-- Spacing System -->
<my-box m="2" p="3" bgcolor="info" color="white">
  Margin 2, Padding 3
</my-box>

<!-- Directional Spacing -->
<my-box pt="3" pb="1" px="2" bgcolor="warning" color="white">
  Top padding 3, bottom padding 1, horizontal padding 2
</my-box>

<!-- Colors and Styling -->
<my-box 
  p="3" 
  bgcolor="primary" 
  color="white" 
  borderRadius="8px" 
  boxShadow="0 2px 8px rgba(0,0,0,0.1)">
  Styled box with shadow and rounded corners
</my-box>

<!-- Positioning -->
<my-box position="relative" height="200px" bgcolor="grey-100">
  <my-box position="absolute" top="10px" left="10px" p="2" bgcolor="error" color="white">
    Absolutely positioned
  </my-box>
</my-box>

<!-- Typography -->
<my-box 
  fontSize="24px" 
  fontWeight="bold" 
  textAlign="center" 
  color="primary" 
  p="2">
  Large centered text
</my-box>

<!-- Complex Layout -->
<my-box 
  display="flex" 
  flexDirection="column" 
  gap="2" 
  p="3" 
  bgcolor="white" 
  border="1px solid #e0e0e0" 
  borderRadius="8px">
  
  <my-box display="flex" justifyContent="space-between" alignItems="center">
    <my-box fontSize="20px" fontWeight="600">Header</my-box>
    <my-box p="1" bgcolor="success" color="white" borderRadius="4px">Badge</my-box>
  </my-box>
  
  <my-box color="text-secondary">
    Content area with flexible layout using Box components.
  </my-box>
  
  <my-box display="flex" gap="2">
    <my-box flex="1" p="2" bgcolor="grey-100" textAlign="center">Column 1</my-box>
    <my-box flex="1" p="2" bgcolor="grey-100" textAlign="center">Column 2</my-box>
  </my-box>
</my-box>

Box Properties:

Layout & Display:

component: 'div' | 'span' | 'section' | etc. - HTML element to render (default: 'div')
display: 'block' | 'inline' | 'flex' | 'grid' | 'none' | etc. - CSS display property
position: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' - CSS position property

Flexbox Properties:

flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse' - Flex direction
flexWrap: 'nowrap' | 'wrap' | 'wrap-reverse' - Flex wrap behavior
justifyContent: 'flex-start' | 'center' | 'space-between' | 'space-around' | 'space-evenly' - Main axis alignment
alignItems: 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch' - Cross axis alignment
alignContent: 'flex-start' | 'center' | 'space-between' | 'space-around' | 'stretch' - Multi-line alignment
alignSelf: 'auto' | 'flex-start' | 'center' | 'flex-end' | 'baseline' | 'stretch' - Individual item alignment
flex: string - Shorthand for flex-grow, flex-shrink, and flex-basis
flexGrow: number - Flex grow factor
flexShrink: number - Flex shrink factor
flexBasis: string - Flex basis value
order: number - Flex order
gap: string | number - Gap between flex/grid items (uses 8px spacing unit for numbers)
rowGap: string | number - Row gap for flex/grid layouts
columnGap: string | number - Column gap for flex/grid layouts

Spacing Properties (Material Design 8px unit system):

m: string | number - Margin (all sides)
mt: string | number - Margin top
mr: string | number - Margin right
mb: string | number - Margin bottom
ml: string | number - Margin left
mx: string | number - Margin horizontal (left + right)
my: string | number - Margin vertical (top + bottom)
p: string | number - Padding (all sides)
pt: string | number - Padding top
pr: string | number - Padding right
pb: string | number - Padding bottom
pl: string | number - Padding left
px: string | number - Padding horizontal (left + right)
py: string | number - Padding vertical (top + bottom)

Sizing Properties:

width: string - CSS width value
height: string - CSS height value
minWidth: string - CSS min-width value
minHeight: string - CSS min-height value
maxWidth: string - CSS max-width value
maxHeight: string - CSS max-height value

Positioning Properties:

top: string - CSS top value
right: string - CSS right value
bottom: string - CSS bottom value
left: string - CSS left value
zIndex: string | number - CSS z-index value

Colors & Styling:

color: string - Text color (theme colors: 'primary', 'secondary', 'error', 'warning', 'info', 'success', 'text-primary', 'text-secondary', or custom CSS color)
bgcolor: string - Background color (theme colors: 'primary', 'secondary', 'error', 'warning', 'info', 'success', 'grey-50' to 'grey-500', 'white', 'transparent', or custom CSS color)
border: string - CSS border value
borderRadius: string - CSS border-radius value
boxShadow: string - CSS box-shadow value
overflow: 'visible' | 'hidden' | 'scroll' | 'auto' - CSS overflow property

Typography Properties:

fontSize: string - CSS font-size value
fontWeight: string | number - CSS font-weight value
lineHeight: string | number - CSS line-height value
letterSpacing: string - CSS letter-spacing value
textAlign: 'left' | 'center' | 'right' | 'justify' - Text alignment
textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase' - Text transformation

Spacing System: The Box component uses Material Design's 8px spacing unit system. When you provide a number for spacing properties, it's multiplied by 8px:

p="1" = padding: 8px
m="2" = margin: 16px
gap="3" = gap: 24px

You can also provide string values for custom spacing:

p="12px" = padding: 12px
m="1rem" = margin: 1rem

Theme Colors:

Primary Colors: 'primary', 'secondary', 'error', 'warning', 'info', 'success'
Text Colors: 'text-primary', 'text-secondary', 'text-disabled'
Grey Palette: 'grey-50', 'grey-100', 'grey-200', 'grey-300', 'grey-400', 'grey-500'
Special: 'white', 'transparent'

Features:

Flexible Layout: Complete flexbox support with all properties
Spacing System: Material Design 8px unit system with directional spacing
Theme Integration: Built-in theme colors and typography
Responsive Design: All CSS properties supported for responsive layouts
Performance: Efficient CSS generation with utility classes and dynamic styles
Accessibility: Semantic HTML with proper element selection
Customization: Support for custom CSS values alongside theme values
Layout Utilities: Position, sizing, overflow, and display utilities

Usage Patterns:

Use for layout containers and spacing between components
Replace div elements with semantic layout structure
Create responsive layouts with flexbox properties
Apply consistent spacing using the 8px unit system
Use theme colors for consistent design system
Combine multiple Box components for complex layouts
Use positioning properties for overlays and absolute positioning
Apply typography properties for text styling within layouts

Common Layout Patterns:

<!-- Centered Content -->
<my-box display="flex" justifyContent="center" alignItems="center" height="100vh">
  <my-box>Centered content</my-box>
</my-box>

<!-- Sidebar Layout -->
<my-box display="flex" height="100vh">
  <my-box width="250px" bgcolor="grey-100" p="2">Sidebar</my-box>
  <my-box flex="1" p="3">Main content</my-box>
</my-box>

<!-- Card Layout -->
<my-box 
  p="3" 
  bgcolor="white" 
  borderRadius="8px" 
  boxShadow="0 2px 4px rgba(0,0,0,0.1)"
  border="1px solid #e0e0e0">
  Card content
</my-box>

<!-- Grid-like Layout -->
<my-box display="flex" flexWrap="wrap" gap="2">
  <my-box flex="1" minWidth="200px" p="2" bgcolor="grey-100">Item 1</my-box>
  <my-box flex="1" minWidth="200px" p="2" bgcolor="grey-100">Item 2</my-box>
  <my-box flex="1" minWidth="200px" p="2" bgcolor="grey-100">Item 3</my-box>
</my-box>

Container

<!-- Basic Container -->
<my-container>
  <h1>Centered Content</h1>
  <p>This content is automatically centered and has responsive max-widths.</p>
</my-container>

<!-- Container Sizes -->
<my-container maxWidth="xs">Extra Small Container (444px max)</my-container>
<my-container maxWidth="sm">Small Container (600px max)</my-container>
<my-container maxWidth="md">Medium Container (900px max)</my-container>
<my-container maxWidth="lg">Large Container (1200px max)</my-container>
<my-container maxWidth="xl">Extra Large Container (1536px max)</my-container>

<!-- Fluid Container (no max-width) -->
<my-container maxWidth="false">
  Fluid container that takes full width
</my-container>

<!-- Container without gutters -->
<my-container disableGutters>
  Container without default padding
</my-container>

<!-- Fixed height container -->
<my-container fixed>
  Container with min-height: 100vh
</my-container>

<!-- Real-world example -->
<my-container maxWidth="lg">
  <header>
    <h1>My Application</h1>
  </header>
  
  <main>
    <section>
      <h2>Welcome</h2>
      <p>This content is properly contained and centered.</p>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2024 My Company</p>
  </footer>
</my-container>

Container Properties:

maxWidth: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false - Maximum width breakpoint (default: 'lg')
disableGutters: boolean - Remove default horizontal padding (default: false)
fixed: boolean - Set min-height to 100vh for full-height layouts (default: false)
component: string - HTML element to render (default: 'div')

Breakpoint Sizes:

xs: 444px maximum width
sm: 600px maximum width
md: 900px maximum width
lg: 1200px maximum width (default)
xl: 1536px maximum width
false: No maximum width (fluid)

Responsive Behavior: The Container component automatically adjusts its max-width based on screen size:

Mobile (<600px): Full width with 16px horizontal padding
Tablet (600px+): Respects maxWidth prop with 24px horizontal padding
Desktop (900px+): Continues to respect maxWidth prop
Large screens (1200px+): Uses larger breakpoints when appropriate

Gutter System:

Default gutters: 16px padding on mobile, 24px on tablet and up
Disabled gutters: No horizontal padding (useful for full-width content)
Responsive gutters: Automatically adjust based on screen size

Features:

Responsive Design: Automatically adapts to different screen sizes
Centered Content: Content is horizontally centered with auto margins
Consistent Spacing: Follows Material Design spacing guidelines
Flexible Sizing: Multiple breakpoint options for different use cases
Full-height Support: Optional min-height: 100vh for full-page layouts
Customizable Padding: Can disable gutters for edge-to-edge content
Semantic HTML: Configurable component element for proper semantics

Usage Patterns:

Use as the main content wrapper for pages and sections
Choose appropriate maxWidth based on content type:
- xs/sm: Forms, narrow content, mobile-first designs
- md: Articles, blog posts, medium-width content
- lg: Dashboards, general application content (default)
- xl: Wide layouts, data tables, complex interfaces
- false: Full-width layouts, hero sections, backgrounds
Use disableGutters when you need content to touch container edges
Use fixed for full-height page layouts and landing pages
Nest other components inside for consistent layout structure

Common Layout Patterns:

<!-- Page Layout -->
<my-container maxWidth="lg">
  <header>Navigation and branding</header>
  <main>Primary content area</main>
  <footer>Footer information</footer>
</my-containe

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Lit Material Components

Features

Installation

Usage

Available Components

Layout

Navigation

Form Controls

Data Display

Feedback

Surfaces

Utils

Data Display

Component Examples

Button

TextField

TextareaAutosize

Autocomplete

ButtonGroup

Badge

Avatar

ImageList

List

Fab (Floating Action Button)

FormControlLabel

NumberField

ToggleButton & ToggleButtonGroup

TransferList

Progress

Skeleton

Snackbar

Breadcrumbs

Link

Accordion

Box

Container