@duskmoon-dev/core Skill
Overview
@duskmoon-dev/core is a CSS-only component library for Tailwind CSS v4 with Material Design 3's extended color system.
Installation
# Bun
bun add @duskmoon-dev/core tailwindcss@^4.0.0
# npm
npm install @duskmoon-dev/core tailwindcss@^4.0.0
# pnpm
pnpm add @duskmoon-dev/core tailwindcss@^4.0.0
Setup
Option A: CSS Import (Recommended)
@import "tailwindcss";
@import "@duskmoon-dev/core";
Option B: Tailwind Plugin
@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";
The @plugin approach registers MD3 color tokens into Tailwind's theme, enabling utility classes like bg-primary, text-on-surface, etc.
Theme Configuration
Apply theme via data-theme attribute on HTML element:
<html data-theme="sunshine"> <!-- Light theme -->
<html data-theme="moonlight"> <!-- Dark theme -->
Available Components
Actions
btn - Buttons with variants: btn-primary, btn-secondary, btn-tertiary, btn-outline, btn-ghost, btn-text, btn-loadingcircle-menu - Radial navigation menu: circle-menu-toggler, circle-menu-list, circle-menu-item, circle-menu-label, circle-menu-primary, circle-menu-secondary, circle-menu-tertiary, circle-menu-info, circle-menu-success, circle-menu-warning, circle-menu-error, circle-menu-sm, circle-menu-lgfile-upload - Drag-and-drop file uploader: file-upload-dropzone, file-upload-primary, file-upload-compact, file-upload-button, file-upload-sm, file-upload-lg, file-upload-ghosttoggle-btn - Toggle buttons and groups: toggle-btn-active, toggle-btn-primary, toggle-btn-ghost, toggle-btn-sm, toggle-btn-lg, toggle-group, toggle-segmented, toggle-chip, toggle-filled, toggle-outlined
Data Entry
input - Text inputs: input-primary, input-secondary, input-errortextarea - Multi-line text: textarea-primary, textarea-resize-none, textarea-resize-verticalselect - Dropdown selection: select-primary, select-filled, select-outlinedcascader - Hierarchical selection: cascader, cascader-panel, cascader-menucheckbox - Checkboxes: checkbox-primary, checkbox-indeterminate, checkbox-groupradio - Radio buttons: radio-primary, radio-group, radio-group-horizontalswitch - Toggle switches: switch-primary, switch-secondaryslider - Range sliderssegment-control - Segmented buttons: segment-control, segment-control-itemautocomplete - Search with suggestionsdatepicker - Calendar: date, datetime, date range, datetime range pickerstime-input - Time selection: time-input, time-input-pickerfile-upload - Drag-and-drop file uploaderrating - Star/heart ratingsotp-input - OTP verification: otp-input, otp-input-fieldpin-input - PIN entry: pin-input, pin-input-maskedmulti-select - Multiple selection: multi-select, multi-select-tagtree-select - Hierarchical dropdown: tree-select, tree-select-nodeform-group - Form layout: form-group, form-label, helper-text, fieldsettheme-controller - Theme switching: theme-controller (inline switch), theme-controller-dropdown, theme-controller-item, theme-controller-label
Data Display
card - Content containers: card-body, card-titlebadge - Status indicators: badge-primary, badge-dotavatar - User images: avatar-lg, avatar-status-onlinechip - Tags/filters: chip-primary, chip-removabletable - Data tables: table-hover, table-stripedlist - Vertical lists: list-item, list-item-interactivetimeline - Chronological eventsskeleton - Loading placeholders: skeleton-text, skeleton-circle, skeleton-rect, skeleton-wave, skeleton-avatar, skeleton-button, skeleton-card, skeleton-groupcode-block - Styled code containers: code-header, code-title, code-language, code-content, code-block-compact, code-block-borderlesschat - LLM-oriented chat primitives: chat-start, chat-end, chat-avatar, chat-header, chat-footer, chat-bubble (with 7 color variants), chat-bubble-filled, chat-bubble-xs/sm/md/lg, chat-bubble-streaming, chat-reasoning, chat-tool with states (chat-tool-pending, chat-tool-running, chat-tool-success, chat-tool-error), chat-typing
Feedback
alert - Messages: alert-success, alert-error, alert-warning, alert-infodialog - Modal dialogs: dialog-backdrop, dialog-mdmodal - Full overlaystoast - Notifications: toast-success, toast-showsnackbar - Brief messagesprogress - Loading: progress-primary, progress-indeterminateskeleton - Placeholders: skeleton-text, skeleton-circletooltip - Hover info: tooltip-top, tooltip-bottom
Navigation
breadcrumbs - Breadcrumb navigation: breadcrumb-item, breadcrumb-item-active, breadcrumb-item-disabled, breadcrumb-link, breadcrumb-separator, breadcrumb-icon, breadcrumb-home, breadcrumb-home-icon, breadcrumb-ellipsis, breadcrumbs-contained, breadcrumbs-sm, breadcrumbs-lg, breadcrumbs-nowrapnavbar - Top navigation: navbar-surface-container-high, navbar-start, navbar-center, navbar-endtabs - Tab navigation: tab, tab-active, tabs-boxed, tabs-lifted, tab-sm, tab-lg, tab-xsmenu - Dropdown/context menu: menu-item, menu-title, menu-horizontal, menu-verticaldrawer - Side panels: drawer-left, drawer-opennested-menu - Collapsible sidebar: nested-menu, nested-menu-title, nested-menu-bordered, nested-menu-compactpagination - Page navigation: pagination-item, pagination-item-active, pagination-item-disabled, pagination-prev, pagination-next, pagination-ellipsis, pagination-compact, pagination-responsive, pagination-info, pagination-input, pagination-item-active-primary, pagination-item-active-secondary, pagination-item-active-tertiarybottom-nav - Mobile navigation: bottom-nav-itemstepper - Multi-step: stepper-step-active, stepper-step-completed
Layout
divider - Separators: divider-dashed, divider-verticalappbar - Action bars: appbar-top, appbar-bottommarkdown-body - GitHub-style markdown typography: single class applied to a container, styles all child elements (headings, code, tables, blockquotes, lists)grid-cols-auto-fill-* - Responsive grid with auto-fill: grid-cols-auto-fill-48, grid-cols-auto-fill-64grid-cols-auto-fit-* - Responsive grid with auto-fit: grid-cols-auto-fit-48, grid-cols-auto-fit-64
Utilities
sr-only - Screen reader only (visually hidden but accessible)not-sr-only - Undo sr-only for focus states
Surfaces
accordion - Expandable panels: accordion-item-openbottomsheet - Mobile panels: bottom-sheet-showpopover - Contextual overlays: popover-top, popover-showcollapse - Collapsible content
Usage Examples
Buttons
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-outline">Outlined</button>
<button class="btn btn-tertiary btn-ghost">Ghost</button>
<button class="btn btn-primary btn-loading">Loading...</button>
Chat
<!-- Chat message (start = received, end = sent) -->
<div class="chat chat-start">
<div class="chat-avatar">
<img src="bot.png" class="avatar-image" alt="Bot" />
</div>
<div class="chat-header">Assistant</div>
<div class="chat-bubble chat-bubble-primary">Hello! How can I help you?</div>
<div class="chat-footer">Just now</div>
</div>
<div class="chat chat-end">
<div class="chat-avatar">
<img src="user.jpg" class="avatar-image" alt="User" />
</div>
<div class="chat-header">You</div>
<div class="chat-bubble">I have a question about my account.</div>
<div class="chat-footer">Just now</div>
</div>
<!-- Reasoning block (collapsible) -->
<details class="chat-reasoning">
<summary>Thought process</summary>
The user is asking about account access...
</details>
<!-- Tool call (collapsible with status) -->
<details class="chat-tool chat-tool-success">
<summary class="chat-tool-header">
get_account_info
<span class="chat-tool-status">completed</span>
</summary>
<div class="chat-tool-call">{ "account_id": "123" }</div>
<div class="chat-tool-result">{ "name": "Alice", "status": "active" }</div>
</details>
<!-- Typing indicator -->
<div class="chat chat-start">
<div class="chat-bubble">
<span class="chat-typing"><span></span></span>
</div>
</div>
Cards
<div class="card">
<div class="card-body">
<h2 class="card-title">Title</h2>
<p>Content</p>
</div>
</div>
Forms
<input type="text" class="input" placeholder="Default" />
<input type="text" class="input input-primary" placeholder="Primary" />
<input type="text" class="input input-error" placeholder="Error" />
Alerts
<div class="alert alert-success">Success message</div>
<div class="alert alert-error">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>
Navigation
<nav class="navbar navbar-surface-container-high">
<div class="navbar-start">
<a class="navbar-brand">Logo</a>
</div>
<div class="navbar-center">
<a class="navbar-item navbar-item-active">Home</a>
<a class="navbar-item">About</a>
</div>
</nav>
Tabs
<div class="tabs">
<button class="tab tab-active">Tab 1</button>
<button class="tab">Tab 2</button>
</div>
Dialog
<div class="dialog-backdrop dialog-backdrop-show">
<div class="dialog dialog-md">
<div class="dialog-header">
<h2 class="dialog-title">Title</h2>
</div>
<div class="dialog-body">Content</div>
<div class="dialog-actions">
<button class="btn btn-text">Cancel</button>
<button class="btn btn-filled">Confirm</button>
</div>
</div>
</div>
Nested Menu
<ul class="nested-menu nested-menu-bordered">
<li class="nested-menu-title">Getting Started</li>
<li><a href="/install">Installation</a></li>
<li><a href="/config" class="active">Configuration</a></li>
<li>
<details open>
<summary>Components</summary>
<ul>
<li><a href="/button">Button</a></li>
<li><a href="/card">Card</a></li>
</ul>
</details>
</li>
</ul>
Theme Controller
<!-- Inline switch mode -->
<div class="theme-controller">
<input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
<label class="theme-controller-label">Light</label>
<input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
<label class="theme-controller-label">Dark</label>
</div>
<!-- Dropdown mode -->
<details class="theme-controller-dropdown">
<summary class="theme-controller-trigger">Theme</summary>
<div class="theme-controller-menu">
<input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />
<label class="theme-controller-label">Sunshine</label>
<input type="radio" name="theme" value="moonlight" class="theme-controller-item" />
<label class="theme-controller-label">Moonlight</label>
</div>
</details>
Toggle Buttons
<!-- Single toggle -->
<button class="toggle-btn toggle-btn-active">Bold</button>
<!-- Toggle group -->
<div class="toggle-group">
<button class="toggle-btn toggle-btn-active">Left</button>
<button class="toggle-btn">Center</button>
<button class="toggle-btn">Right</button>
</div>
Responsive Grid
<!-- Auto-fill: Fixed column size, empty space on right -->
<div class="grid grid-cols-auto-fill-48 gap-4">
<div class="card">Item 1</div>
<div class="card">Item 2</div>
<div class="card">Item 3</div>
</div>
<!-- Auto-fit: Columns stretch to fill container -->
<div class="grid grid-cols-auto-fit-64 gap-4">
<div class="card">Item 1</div>
<div class="card">Item 2</div>
</div>
Color System
Color Utilities
<!-- Backgrounds -->
<div class="bg-primary">Primary</div>
<div class="bg-secondary">Secondary</div>
<div class="bg-tertiary">Tertiary</div>
<div class="bg-surface-container">Surface</div>
<!-- Text -->
<p class="text-primary">Primary</p>
<p class="text-on-surface">On surface</p>
<p class="text-on-surface-variant">Muted</p>
<!-- Semantic -->
<div class="bg-success text-success-content">Success</div>
<div class="bg-error text-error-content">Error</div>
CSS Variables
.custom {
background-color: var(--color-primary);
color: var(--color-primary-content);
border-color: var(--color-outline);
}
Theme Switching
// Switch to dark theme
document.documentElement.dataset.theme = 'moonlight';
// Switch to light theme
document.documentElement.dataset.theme = 'sunshine';
Importing Component Styles
Full Library Import
Import all components and themes at once:
/* In your CSS file */
@import "tailwindcss";
@import "@duskmoon-dev/core";
Individual Component CSS Import
Import only the CSS you need for smaller bundle sizes:
/* CSS imports */
@import "@duskmoon-dev/core/components/button";
@import "@duskmoon-dev/core/components/card";
@import "@duskmoon-dev/core/components/input";
@import "@duskmoon-dev/core/components/alert";
JavaScript/TypeScript Import
// Import component styles in JS/TS
import '@duskmoon-dev/core/components/button';
import '@duskmoon-dev/core/components/card';
import '@duskmoon-dev/core/components/input';
Theme-Only Import
/* Import specific themes */
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";
Available Component Exports
All components available for individual import:
| Import Path |
Component |
@duskmoon-dev/core/components/accordion |
Accordion |
@duskmoon-dev/core/components/alert |
Alert |
@duskmoon-dev/core/components/appbar |
App Bar |
@duskmoon-dev/core/components/autocomplete |
Autocomplete |
@duskmoon-dev/core/components/avatar |
Avatar |
@duskmoon-dev/core/components/badge |
Badge |
@duskmoon-dev/core/components/bottom-navigation |
Bottom Navigation |
@duskmoon-dev/core/components/bottomsheet |
Bottom Sheet |
@duskmoon-dev/core/components/button |
Button |
@duskmoon-dev/core/components/card |
Card |
@duskmoon-dev/core/components/cascader |
Cascader |
@duskmoon-dev/core/components/chat |
Chat |
@duskmoon-dev/core/components/checkbox |
Checkbox |
@duskmoon-dev/core/components/chip |
Chip |
@duskmoon-dev/core/components/circle-menu |
Circle Menu |
@duskmoon-dev/core/components/code-block |
Code Block |
@duskmoon-dev/core/components/collapse |
Collapse |
@duskmoon-dev/core/components/datepicker |
Date Picker |
@duskmoon-dev/core/components/dialog |
Dialog |
@duskmoon-dev/core/components/divider |
Divider |
@duskmoon-dev/core/components/drawer |
Drawer |
@duskmoon-dev/core/components/file-upload |
File Upload |
@duskmoon-dev/core/components/form |
Form |
@duskmoon-dev/core/components/form-group |
Form Group |
@duskmoon-dev/core/components/input |
Input |
@duskmoon-dev/core/components/list |
List |
@duskmoon-dev/core/components/markdown-body |
Markdown Body |
@duskmoon-dev/core/components/modal |
Modal |
@duskmoon-dev/core/components/multi-select |
Multi-Select |
@duskmoon-dev/core/components/navigation |
Navigation (Navbar/Tabs/Menu) |
@duskmoon-dev/core/components/nested-menu |
Nested Menu |
@duskmoon-dev/core/components/otp-input |
OTP Input |
@duskmoon-dev/core/components/pin-input |
PIN Input |
@duskmoon-dev/core/components/popover |
Popover |
@duskmoon-dev/core/components/progress |
Progress |
@duskmoon-dev/core/components/radio |
Radio |
@duskmoon-dev/core/components/rating |
Rating |
@duskmoon-dev/core/components/segment-control |
Segment Control |
@duskmoon-dev/core/components/select |
Select |
@duskmoon-dev/core/components/skeleton |
Skeleton |
@duskmoon-dev/core/components/slider |
Slider |
@duskmoon-dev/core/components/snackbar |
Snackbar |
@duskmoon-dev/core/components/stepper |
Stepper |
@duskmoon-dev/core/components/switch |
Switch |
@duskmoon-dev/core/components/table |
Table |
@duskmoon-dev/core/components/textarea |
Textarea |
@duskmoon-dev/core/components/theme-controller |
Theme Controller |
@duskmoon-dev/core/components/time-input |
Time Input |
@duskmoon-dev/core/components/timeline |
Timeline |
@duskmoon-dev/core/components/toast |
Toast |
@duskmoon-dev/core/components/toggle |
Toggle |
@duskmoon-dev/core/components/tooltip |
Tooltip |
@duskmoon-dev/core/components/tree-select |
Tree Select |
Usage in Web Components / Custom Elements
Each component exports a named css export containing the CSS string:
// Import the css named export
import { css as buttonCSS } from '@duskmoon-dev/core/components/button';
import { css as cardCSS } from '@duskmoon-dev/core/components/card';
import { css as inputCSS } from '@duskmoon-dev/core/components/input';
Example usage in a custom element:
import { css as buttonCSS } from '@duskmoon-dev/core/components/button';
// Strip @layer wrapper for Shadow DOM compatibility
const coreStyles = buttonCSS.replace(/@layer\s+components\s*\{/, '').replace(/\}\s*$/, '');
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
// Add styles to shadow DOM
const style = document.createElement('style');
style.textContent = coreStyles;
this.shadowRoot.appendChild(style);
}
}
Note: The CSS is wrapped in @layer components { } for Tailwind CSS cascade layers. When using in Shadow DOM, strip the @layer wrapper as shown above.
1---2name: duskmoon-dev-core3description: When using npm package `@duskmoon-dev/core`, this skill shows how to install, configure, and use the CSS component library4---56# @duskmoon-dev/core Skill78## Overview910`@duskmoon-dev/core` is a CSS-only component library for Tailwind CSS v4 with Material Design 3's extended color system.1112## Installation1314```bash15# Bun16bun add @duskmoon-dev/core tailwindcss@^4.0.01718# npm19npm install @duskmoon-dev/core tailwindcss@^4.0.02021# pnpm22pnpm add @duskmoon-dev/core tailwindcss@^4.0.023```2425## Setup2627### Option A: CSS Import (Recommended)2829```css30@import "tailwindcss";31@import "@duskmoon-dev/core";32```3334### Option B: Tailwind Plugin3536```css37@import "tailwindcss";38@plugin "@duskmoon-dev/core/plugin";39```4041The `@plugin` approach registers MD3 color tokens into Tailwind's theme, enabling utility classes like `bg-primary`, `text-on-surface`, etc.4243### Theme Configuration4445Apply theme via `data-theme` attribute on HTML element:4647```html48<html data-theme="sunshine"> <!-- Light theme -->49<html data-theme="moonlight"> <!-- Dark theme -->50```5152## Available Components5354### Actions55- `btn` - Buttons with variants: `btn-primary`, `btn-secondary`, `btn-tertiary`, `btn-outline`, `btn-ghost`, `btn-text`, `btn-loading`56- `circle-menu` - Radial navigation menu: `circle-menu-toggler`, `circle-menu-list`, `circle-menu-item`, `circle-menu-label`, `circle-menu-primary`, `circle-menu-secondary`, `circle-menu-tertiary`, `circle-menu-info`, `circle-menu-success`, `circle-menu-warning`, `circle-menu-error`, `circle-menu-sm`, `circle-menu-lg`57- `file-upload` - Drag-and-drop file uploader: `file-upload-dropzone`, `file-upload-primary`, `file-upload-compact`, `file-upload-button`, `file-upload-sm`, `file-upload-lg`, `file-upload-ghost`58- `toggle-btn` - Toggle buttons and groups: `toggle-btn-active`, `toggle-btn-primary`, `toggle-btn-ghost`, `toggle-btn-sm`, `toggle-btn-lg`, `toggle-group`, `toggle-segmented`, `toggle-chip`, `toggle-filled`, `toggle-outlined`5960### Data Entry61- `input` - Text inputs: `input-primary`, `input-secondary`, `input-error`62- `textarea` - Multi-line text: `textarea-primary`, `textarea-resize-none`, `textarea-resize-vertical`63- `select` - Dropdown selection: `select-primary`, `select-filled`, `select-outlined`64- `cascader` - Hierarchical selection: `cascader`, `cascader-panel`, `cascader-menu`65- `checkbox` - Checkboxes: `checkbox-primary`, `checkbox-indeterminate`, `checkbox-group`66- `radio` - Radio buttons: `radio-primary`, `radio-group`, `radio-group-horizontal`67- `switch` - Toggle switches: `switch-primary`, `switch-secondary`68- `slider` - Range sliders69- `segment-control` - Segmented buttons: `segment-control`, `segment-control-item`70- `autocomplete` - Search with suggestions71- `datepicker` - Calendar: date, datetime, date range, datetime range pickers72- `time-input` - Time selection: `time-input`, `time-input-picker`73- `file-upload` - Drag-and-drop file uploader74- `rating` - Star/heart ratings75- `otp-input` - OTP verification: `otp-input`, `otp-input-field`76- `pin-input` - PIN entry: `pin-input`, `pin-input-masked`77- `multi-select` - Multiple selection: `multi-select`, `multi-select-tag`78- `tree-select` - Hierarchical dropdown: `tree-select`, `tree-select-node`79- `form-group` - Form layout: `form-group`, `form-label`, `helper-text`, `fieldset`80- `theme-controller` - Theme switching: `theme-controller` (inline switch), `theme-controller-dropdown`, `theme-controller-item`, `theme-controller-label`8182### Data Display83- `card` - Content containers: `card-body`, `card-title`84- `badge` - Status indicators: `badge-primary`, `badge-dot`85- `avatar` - User images: `avatar-lg`, `avatar-status-online`86- `chip` - Tags/filters: `chip-primary`, `chip-removable`87- `table` - Data tables: `table-hover`, `table-striped`88- `list` - Vertical lists: `list-item`, `list-item-interactive`89- `timeline` - Chronological events90- `skeleton` - Loading placeholders: `skeleton-text`, `skeleton-circle`, `skeleton-rect`, `skeleton-wave`, `skeleton-avatar`, `skeleton-button`, `skeleton-card`, `skeleton-group`91- `code-block` - Styled code containers: `code-header`, `code-title`, `code-language`, `code-content`, `code-block-compact`, `code-block-borderless`92- `chat` - LLM-oriented chat primitives: `chat-start`, `chat-end`, `chat-avatar`, `chat-header`, `chat-footer`, `chat-bubble` (with 7 color variants), `chat-bubble-filled`, `chat-bubble-xs`/`sm`/`md`/`lg`, `chat-bubble-streaming`, `chat-reasoning`, `chat-tool` with states (`chat-tool-pending`, `chat-tool-running`, `chat-tool-success`, `chat-tool-error`), `chat-typing`9394### Feedback95- `alert` - Messages: `alert-success`, `alert-error`, `alert-warning`, `alert-info`96- `dialog` - Modal dialogs: `dialog-backdrop`, `dialog-md`97- `modal` - Full overlays98- `toast` - Notifications: `toast-success`, `toast-show`99- `snackbar` - Brief messages100- `progress` - Loading: `progress-primary`, `progress-indeterminate`101- `skeleton` - Placeholders: `skeleton-text`, `skeleton-circle`102- `tooltip` - Hover info: `tooltip-top`, `tooltip-bottom`103104### Navigation105- `breadcrumbs` - Breadcrumb navigation: `breadcrumb-item`, `breadcrumb-item-active`, `breadcrumb-item-disabled`, `breadcrumb-link`, `breadcrumb-separator`, `breadcrumb-icon`, `breadcrumb-home`, `breadcrumb-home-icon`, `breadcrumb-ellipsis`, `breadcrumbs-contained`, `breadcrumbs-sm`, `breadcrumbs-lg`, `breadcrumbs-nowrap`106- `navbar` - Top navigation: `navbar-surface-container-high`, `navbar-start`, `navbar-center`, `navbar-end`107- `tabs` - Tab navigation: `tab`, `tab-active`, `tabs-boxed`, `tabs-lifted`, `tab-sm`, `tab-lg`, `tab-xs`108- `menu` - Dropdown/context menu: `menu-item`, `menu-title`, `menu-horizontal`, `menu-vertical`109- `drawer` - Side panels: `drawer-left`, `drawer-open`110- `nested-menu` - Collapsible sidebar: `nested-menu`, `nested-menu-title`, `nested-menu-bordered`, `nested-menu-compact`111- `pagination` - Page navigation: `pagination-item`, `pagination-item-active`, `pagination-item-disabled`, `pagination-prev`, `pagination-next`, `pagination-ellipsis`, `pagination-compact`, `pagination-responsive`, `pagination-info`, `pagination-input`, `pagination-item-active-primary`, `pagination-item-active-secondary`, `pagination-item-active-tertiary`112- `bottom-nav` - Mobile navigation: `bottom-nav-item`113- `stepper` - Multi-step: `stepper-step-active`, `stepper-step-completed`114115### Layout116- `divider` - Separators: `divider-dashed`, `divider-vertical`117- `appbar` - Action bars: `appbar-top`, `appbar-bottom`118- `markdown-body` - GitHub-style markdown typography: single class applied to a container, styles all child elements (headings, code, tables, blockquotes, lists)119- `grid-cols-auto-fill-*` - Responsive grid with auto-fill: `grid-cols-auto-fill-48`, `grid-cols-auto-fill-64`120- `grid-cols-auto-fit-*` - Responsive grid with auto-fit: `grid-cols-auto-fit-48`, `grid-cols-auto-fit-64`121122### Utilities123- `sr-only` - Screen reader only (visually hidden but accessible)124- `not-sr-only` - Undo sr-only for focus states125126### Surfaces127- `accordion` - Expandable panels: `accordion-item-open`128- `bottomsheet` - Mobile panels: `bottom-sheet-show`129- `popover` - Contextual overlays: `popover-top`, `popover-show`130- `collapse` - Collapsible content131132## Usage Examples133134### Buttons135136```html137<button class="btn btn-primary">Primary</button>138<button class="btn btn-secondary btn-outline">Outlined</button>139<button class="btn btn-tertiary btn-ghost">Ghost</button>140<button class="btn btn-primary btn-loading">Loading...</button>141```142143### Chat144145```html146<!-- Chat message (start = received, end = sent) -->147<div class="chat chat-start">148 <div class="chat-avatar">149 <img src="bot.png" class="avatar-image" alt="Bot" />150 </div>151 <div class="chat-header">Assistant</div>152 <div class="chat-bubble chat-bubble-primary">Hello! How can I help you?</div>153 <div class="chat-footer">Just now</div>154</div>155156<div class="chat chat-end">157 <div class="chat-avatar">158 <img src="user.jpg" class="avatar-image" alt="User" />159 </div>160 <div class="chat-header">You</div>161 <div class="chat-bubble">I have a question about my account.</div>162 <div class="chat-footer">Just now</div>163</div>164165<!-- Reasoning block (collapsible) -->166<details class="chat-reasoning">167 <summary>Thought process</summary>168 The user is asking about account access...169</details>170171<!-- Tool call (collapsible with status) -->172<details class="chat-tool chat-tool-success">173 <summary class="chat-tool-header">174 get_account_info175 <span class="chat-tool-status">completed</span>176 </summary>177 <div class="chat-tool-call">{ "account_id": "123" }</div>178 <div class="chat-tool-result">{ "name": "Alice", "status": "active" }</div>179</details>180181<!-- Typing indicator -->182<div class="chat chat-start">183 <div class="chat-bubble">184 <span class="chat-typing"><span></span></span>185 </div>186</div>187```188189### Cards190191```html192<div class="card">193 <div class="card-body">194 <h2 class="card-title">Title</h2>195 <p>Content</p>196 </div>197</div>198```199200### Forms201202```html203<input type="text" class="input" placeholder="Default" />204<input type="text" class="input input-primary" placeholder="Primary" />205<input type="text" class="input input-error" placeholder="Error" />206```207208### Alerts209210```html211<div class="alert alert-success">Success message</div>212<div class="alert alert-error">Error message</div>213<div class="alert alert-warning">Warning message</div>214<div class="alert alert-info">Info message</div>215```216217### Navigation218219```html220<nav class="navbar navbar-surface-container-high">221 <div class="navbar-start">222 <a class="navbar-brand">Logo</a>223 </div>224 <div class="navbar-center">225 <a class="navbar-item navbar-item-active">Home</a>226 <a class="navbar-item">About</a>227 </div>228</nav>229```230231### Tabs232233```html234<div class="tabs">235 <button class="tab tab-active">Tab 1</button>236 <button class="tab">Tab 2</button>237</div>238```239240### Dialog241242```html243<div class="dialog-backdrop dialog-backdrop-show">244 <div class="dialog dialog-md">245 <div class="dialog-header">246 <h2 class="dialog-title">Title</h2>247 </div>248 <div class="dialog-body">Content</div>249 <div class="dialog-actions">250 <button class="btn btn-text">Cancel</button>251 <button class="btn btn-filled">Confirm</button>252 </div>253 </div>254</div>255```256257### Nested Menu258259```html260<ul class="nested-menu nested-menu-bordered">261 <li class="nested-menu-title">Getting Started</li>262 <li><a href="/install">Installation</a></li>263 <li><a href="/config" class="active">Configuration</a></li>264 <li>265 <details open>266 <summary>Components</summary>267 <ul>268 <li><a href="/button">Button</a></li>269 <li><a href="/card">Card</a></li>270 </ul>271 </details>272 </li>273</ul>274```275276### Theme Controller277278```html279<!-- Inline switch mode -->280<div class="theme-controller">281 <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />282 <label class="theme-controller-label">Light</label>283 <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />284 <label class="theme-controller-label">Dark</label>285</div>286287<!-- Dropdown mode -->288<details class="theme-controller-dropdown">289 <summary class="theme-controller-trigger">Theme</summary>290 <div class="theme-controller-menu">291 <input type="radio" name="theme" value="sunshine" class="theme-controller-item" checked />292 <label class="theme-controller-label">Sunshine</label>293 <input type="radio" name="theme" value="moonlight" class="theme-controller-item" />294 <label class="theme-controller-label">Moonlight</label>295 </div>296</details>297```298299### Toggle Buttons300301```html302<!-- Single toggle -->303<button class="toggle-btn toggle-btn-active">Bold</button>304305<!-- Toggle group -->306<div class="toggle-group">307 <button class="toggle-btn toggle-btn-active">Left</button>308 <button class="toggle-btn">Center</button>309 <button class="toggle-btn">Right</button>310</div>311```312313### Responsive Grid314315```html316<!-- Auto-fill: Fixed column size, empty space on right -->317<div class="grid grid-cols-auto-fill-48 gap-4">318 <div class="card">Item 1</div>319 <div class="card">Item 2</div>320 <div class="card">Item 3</div>321</div>322323<!-- Auto-fit: Columns stretch to fill container -->324<div class="grid grid-cols-auto-fit-64 gap-4">325 <div class="card">Item 1</div>326 <div class="card">Item 2</div>327</div>328```329330## Color System331332### Color Utilities333334```html335<!-- Backgrounds -->336<div class="bg-primary">Primary</div>337<div class="bg-secondary">Secondary</div>338<div class="bg-tertiary">Tertiary</div>339<div class="bg-surface-container">Surface</div>340341<!-- Text -->342<p class="text-primary">Primary</p>343<p class="text-on-surface">On surface</p>344<p class="text-on-surface-variant">Muted</p>345346<!-- Semantic -->347<div class="bg-success text-success-content">Success</div>348<div class="bg-error text-error-content">Error</div>349```350351### CSS Variables352353```css354.custom {355 background-color: var(--color-primary);356 color: var(--color-primary-content);357 border-color: var(--color-outline);358}359```360361## Theme Switching362363```javascript364// Switch to dark theme365document.documentElement.dataset.theme = 'moonlight';366367// Switch to light theme368document.documentElement.dataset.theme = 'sunshine';369```370371## Importing Component Styles372373### Full Library Import374375Import all components and themes at once:376377```css378/* In your CSS file */379@import "tailwindcss";380@import "@duskmoon-dev/core";381```382383### Individual Component CSS Import384385Import only the CSS you need for smaller bundle sizes:386387```css388/* CSS imports */389@import "@duskmoon-dev/core/components/button";390@import "@duskmoon-dev/core/components/card";391@import "@duskmoon-dev/core/components/input";392@import "@duskmoon-dev/core/components/alert";393```394395### JavaScript/TypeScript Import396397```javascript398// Import component styles in JS/TS399import '@duskmoon-dev/core/components/button';400import '@duskmoon-dev/core/components/card';401import '@duskmoon-dev/core/components/input';402```403404### Theme-Only Import405406```css407/* Import specific themes */408@import "@duskmoon-dev/core/themes/sunshine";409@import "@duskmoon-dev/core/themes/moonlight";410```411412### Available Component Exports413414All components available for individual import:415416| Import Path | Component |417|-------------|-----------|418| `@duskmoon-dev/core/components/accordion` | Accordion |419| `@duskmoon-dev/core/components/alert` | Alert |420| `@duskmoon-dev/core/components/appbar` | App Bar |421| `@duskmoon-dev/core/components/autocomplete` | Autocomplete |422| `@duskmoon-dev/core/components/avatar` | Avatar |423| `@duskmoon-dev/core/components/badge` | Badge |424| `@duskmoon-dev/core/components/bottom-navigation` | Bottom Navigation |425| `@duskmoon-dev/core/components/bottomsheet` | Bottom Sheet |426| `@duskmoon-dev/core/components/button` | Button |427| `@duskmoon-dev/core/components/card` | Card |428| `@duskmoon-dev/core/components/cascader` | Cascader |429| `@duskmoon-dev/core/components/chat` | Chat |430| `@duskmoon-dev/core/components/checkbox` | Checkbox |431| `@duskmoon-dev/core/components/chip` | Chip |432| `@duskmoon-dev/core/components/circle-menu` | Circle Menu |433| `@duskmoon-dev/core/components/code-block` | Code Block |434| `@duskmoon-dev/core/components/collapse` | Collapse |435| `@duskmoon-dev/core/components/datepicker` | Date Picker |436| `@duskmoon-dev/core/components/dialog` | Dialog |437| `@duskmoon-dev/core/components/divider` | Divider |438| `@duskmoon-dev/core/components/drawer` | Drawer |439| `@duskmoon-dev/core/components/file-upload` | File Upload |440| `@duskmoon-dev/core/components/form` | Form |441| `@duskmoon-dev/core/components/form-group` | Form Group |442| `@duskmoon-dev/core/components/input` | Input |443| `@duskmoon-dev/core/components/list` | List |444| `@duskmoon-dev/core/components/markdown-body` | Markdown Body |445| `@duskmoon-dev/core/components/modal` | Modal |446| `@duskmoon-dev/core/components/multi-select` | Multi-Select |447| `@duskmoon-dev/core/components/navigation` | Navigation (Navbar/Tabs/Menu) |448| `@duskmoon-dev/core/components/nested-menu` | Nested Menu |449| `@duskmoon-dev/core/components/otp-input` | OTP Input |450| `@duskmoon-dev/core/components/pin-input` | PIN Input |451| `@duskmoon-dev/core/components/popover` | Popover |452| `@duskmoon-dev/core/components/progress` | Progress |453| `@duskmoon-dev/core/components/radio` | Radio |454| `@duskmoon-dev/core/components/rating` | Rating |455| `@duskmoon-dev/core/components/segment-control` | Segment Control |456| `@duskmoon-dev/core/components/select` | Select |457| `@duskmoon-dev/core/components/skeleton` | Skeleton |458| `@duskmoon-dev/core/components/slider` | Slider |459| `@duskmoon-dev/core/components/snackbar` | Snackbar |460| `@duskmoon-dev/core/components/stepper` | Stepper |461| `@duskmoon-dev/core/components/switch` | Switch |462| `@duskmoon-dev/core/components/table` | Table |463| `@duskmoon-dev/core/components/textarea` | Textarea |464| `@duskmoon-dev/core/components/theme-controller` | Theme Controller |465| `@duskmoon-dev/core/components/time-input` | Time Input |466| `@duskmoon-dev/core/components/timeline` | Timeline |467| `@duskmoon-dev/core/components/toast` | Toast |468| `@duskmoon-dev/core/components/toggle` | Toggle |469| `@duskmoon-dev/core/components/tooltip` | Tooltip |470| `@duskmoon-dev/core/components/tree-select` | Tree Select |471472### Usage in Web Components / Custom Elements473474Each component exports a named `css` export containing the CSS string:475476```javascript477// Import the css named export478import { css as buttonCSS } from '@duskmoon-dev/core/components/button';479import { css as cardCSS } from '@duskmoon-dev/core/components/card';480import { css as inputCSS } from '@duskmoon-dev/core/components/input';481```482483Example usage in a custom element:484485```javascript486import { css as buttonCSS } from '@duskmoon-dev/core/components/button';487488// Strip @layer wrapper for Shadow DOM compatibility489const coreStyles = buttonCSS.replace(/@layer\s+components\s*\{/, '').replace(/\}\s*$/, '');490491class MyButton extends HTMLElement {492 constructor() {493 super();494 this.attachShadow({ mode: 'open' });495496 // Add styles to shadow DOM497 const style = document.createElement('style');498 style.textContent = coreStyles;499 this.shadowRoot.appendChild(style);500 }501}502```503504Note: The CSS is wrapped in `@layer components { }` for Tailwind CSS cascade layers. When using in Shadow DOM, strip the `@layer` wrapper as shown above.
gsmlg-dev