Luster UI

import { defineCustomElements } from '@yvstudio/luster-ui/loader';
defineCustomElements();

<script type="module"
  src="https://unpkg.com/@yvstudio/luster-ui/dist/luster/luster.esm.js">
</script>

<luster-button variant="primary">Primary</luster-button>
<luster-button variant="secondary">Secondary</luster-button>
<luster-button variant="tertiary">Tertiary</luster-button>
<luster-button variant="destructive">Destructive</luster-button>
<luster-button variant="primary" loading>Loading</luster-button>
<luster-button variant="primary" disabled>Disabled</luster-button>

<luster-button size="sm">Small</luster-button>
<luster-button size="md">Medium</luster-button>
<luster-button size="lg">Large</luster-button>

<luster-badge variant="default">Default</luster-badge>
<luster-badge variant="success">Success</luster-badge>
<luster-badge variant="warning">Warning</luster-badge>
<luster-badge variant="error">Error</luster-badge>
<luster-badge variant="beta">Beta</luster-badge>
<luster-badge variant="live">Live</luster-badge>

<luster-badge variant="success" dot>Active</luster-badge>
<luster-badge variant="warning" dot>Pending</luster-badge>
<luster-badge variant="error"   dot>Offline</luster-badge>

<luster-input
  label="Email"
  placeholder="you@example.com"
  type="email"
></luster-input>

<luster-input
  label="Password"
  type="password"
  helper-text="At least 8 characters"
></luster-input>

<luster-input
  label="Username"
  error
  error-message="Username is already taken"
></luster-input>

<luster-checkbox label="Accept terms"></luster-checkbox>
<luster-checkbox label="Pre-selected" checked></luster-checkbox>
<luster-checkbox label="Partial" indeterminate></luster-checkbox>
<luster-checkbox label="Disabled" disabled></luster-checkbox>

<luster-toggle label="Notifications"></luster-toggle>
<luster-toggle label="Dark mode" checked></luster-toggle>
<luster-toggle label="Disabled" disabled></luster-toggle>

<luster-alert
  variant="info"
  heading="Information"
  message="Your account is currently under review."
  dismissible
></luster-alert>

<luster-alert
  variant="success"
  heading="Published!"
  message="Your article is now live."
  dismissible
></luster-alert>

<luster-alert
  variant="error"
  heading="Failed to save"
  message="Something went wrong. Please try again."
  dismissible
></luster-alert>

<luster-button variant="primary" id="openBtn">Open modal</luster-button>

<luster-modal
  id="myModal"
  heading="Delete article"
  subtitle="This action cannot be undone."
  confirm-label="Delete"
  cancel-label="Cancel"
></luster-modal>

<script>
  document.getElementById('openBtn').addEventListener('click', () => {
    document.getElementById('myModal').open = true;
  });
</script>

<luster-accordion
  heading="What frameworks are supported?"
  subtitle="Compatibility"
>
  <p>Works in React, Vue, Angular, Svelte and plain HTML.</p>
</luster-accordion>

<luster-accordion
  heading="How does theming work?"
  badge="3 tokens"
  badge-variant="primary"
  expanded
>
  <p>Override 3 CSS custom properties.</p>
</luster-accordion>

<luster-card variant="default">
  <p>Default card</p>
</luster-card>

<luster-card variant="elevated">
  <p>Elevated — shadow lift</p>
</luster-card>

<luster-card variant="glass">
  <p>Glass — blur backdrop</p>
</luster-card>

<luster-article-card
  category="Design Systems"
  heading="Building accessible color palettes"
  excerpt="A practical guide to creating color tokens."
  date="Apr 2026"
  author="Yasmim Vieira"
  author-role="Design Engineer"
></luster-article-card>

<!-- Featured variant -->
<luster-article-card
  category="Web Components"
  heading="Why Web Components for design systems"
  excerpt="Framework-agnostic and future-proof."
  featured
></luster-article-card>

<luster-profile-card
  name="Yasmim Vieira"
  role="Design Engineer"
  stat1-value="48"
  stat1-label="Articles"
  stat2-value="12.4k"
  stat2-label="Readers"
  cta-label="View Portfolio"
></luster-profile-card>

<luster-stat-card
  heading="Analytics Engine"
  description="Real-time event processing"
  version="v3.1"
  status="active"
  users="8.2k"
  has-toggle
  toggle-on
></luster-stat-card>

<luster-stat-card
  heading="Search Index"
  status="beta"
  users="430"
  has-toggle
></luster-stat-card>

<luster-feature-quote
  quote="Design systems are about the relationships between components."
  author="Yasmim Vieira"
  role="Design Engineer"
></luster-feature-quote>

<!-- Large variant -->
<luster-feature-quote
  variant="large"
  quote="Good design is obvious. Great design is transparent."
  author="Joe Sparano"
  role="Designer"
></luster-feature-quote>

<luster-navbar
  logo-title="My App"
  logo-sub="PLATFORM"
  active-link="explorer"
></luster-navbar>

<luster-sidebar active="foundations"></luster-sidebar>

<luster-tabs
  tabs='[{"id":"overview","label":"Overview"},{"id":"api","label":"API Reference"}]'
  active="overview"
>
  <div slot="tab-overview">Overview content</div>
  <div slot="tab-api">API Reference content</div>
</luster-tabs>

<luster-resource-table
  section-label="System Components"
  rows='[
    {"name":"Design Tokens","category":"Foundations","score":98,"status":"active"},
    {"name":"Button System","category":"Components","score":87,"status":"active"},
    {"name":"Legacy Forms","category":"Deprecated","score":34,"status":"deprecated"}
  ]'
></luster-resource-table>

<!-- Activity variant -->
<luster-activity-item
  label="Updated design tokens"
  description="Changed primary color"
  time="2 min ago"
  variant="activity"
  icon="edit"
></luster-activity-item>

<!-- File variant -->
<luster-activity-item
  label="design-tokens.json"
  description="Updated 14 tokens"
  time="5 min ago"
  variant="file"
  file-size="4.2 KB"
  downloadable
></luster-activity-item>

<luster-hero
  heading="Editorial stories, beautifully organized"
  subtitle="Discover and explore content from the world's best writers."
  section="EXPLORE"
></luster-hero>

<!-- With image + parallax -->
<luster-hero
  heading="Your headline here"
  subtitle="Supporting text."
  section="HOME"
  image-url="https://example.com/cover.jpg"
  parallax
></luster-hero>

<luster-color-swatch
  color="#a3a6ff"
  name="Primary"
  hex="#a3a6ff"
></luster-color-swatch>

:root {
  --dc-primary:     #f97316;  /* your brand color      */
  --dc-primary-dim: #ea580c;  /* darker shade           */
  --dc-on-primary:  #ffffff;  /* text/icon on primary   */
}

/* Emerald */
:root { --dc-primary: #10b981; --dc-primary-dim: #059669; --dc-on-primary: #ffffff; }

/* Rose */
:root { --dc-primary: #f43f5e; --dc-primary-dim: #e11d48; --dc-on-primary: #ffffff; }

/* Gold (dark text — amber is light) */
:root { --dc-primary: #f59e0b; --dc-primary-dim: #d97706; --dc-on-primary: #1c1200; }

/* Sky blue */
:root { --dc-primary: #0ea5e9; --dc-primary-dim: #0284c7; --dc-on-primary: #ffffff; }

// Switch to light
document.documentElement.setAttribute('data-theme', 'light');

// Switch to dark
document.documentElement.setAttribute('data-theme', 'dark');

// Persist preference
localStorage.setItem('theme', 'light');

// Auto — let OS handle it (no JS needed)
// @media (prefers-color-scheme: light) is already active