Elements

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-card>
  <lumen-button>Click me</lumen-button>
</lumen-card>

<script type="module">
  import { enhanceLumenForms } from '@santi020k/lumen-elements/define'

  enhanceLumenForms()
</script>

<form data-ui-form>
  <label for="email">Email</label>
  <input
    id="email"
    type="email"
    required
    data-error-required="Please enter your email"
    data-error-type="Enter a valid email address"
    class="ui-input"
  />
  <button type="submit" class="ui-button ui-button--default">Sign up</button>
</form>

<script type="module">
  import { enhanceLumenCalendars } from '@santi020k/lumen-elements/define'

  enhanceLumenCalendars()
</script>

<lumen-calendar
  max="2026-07-31"
  min="2026-07-01"
  month="2026-07"
  name="delivery"
></lumen-calendar>

<script type="module">
  import { enhanceLumenDateRangePickers } from '@santi020k/lumen-elements/define'

  enhanceLumenDateRangePickers()
</script>

<section data-ui-date-range-picker class="ui-date-range-picker">
  <input class="ui-input ui-date-picker" type="date" aria-label="Start date" />
  <input class="ui-input ui-date-picker" type="date" aria-label="End date" />
</section>

<script type="module">
  import { enhanceLumenInputOTPs } from '@santi020k/lumen-elements/define'

  enhanceLumenInputOTPs()
</script>

<lumen-input-otp
  aria-label="Verification code"
  length="6"
  name="code"
></lumen-input-otp>

<script type="module">
  import { enhanceLumenResizable } from '@santi020k/lumen-elements/define'

  enhanceLumenResizable()
</script>

<lumen-resizable data-ui-resizable-default-sizes="30,70">
  <aside>Navigation</aside>
  <main>Editor</main>
</lumen-resizable>

<script type="module">
  import { enhanceLumenRichTextEditors } from '@santi020k/lumen-elements/define'

  enhanceLumenRichTextEditors()
</script>

<section data-ui-rich-text-editor class="ui-rich-text-editor">
  <div role="toolbar">
    <button data-ui-command="bold" class="ui-button ui-button--icon">B</button>
    <button data-ui-command="italic" class="ui-button ui-button--icon">I</button>
  </div>
  <div contenteditable data-ui-rich-text-editable>
    <p>Start writing...</p>
  </div>
</section>

<script type="module">
  import { defineLumenElements, LumenToast } from '@santi020k/lumen-elements/define'

  defineLumenElements()

  document.querySelector('#notify').addEventListener('click', () => {
    LumenToast.create({
      title: 'Saved',
      description: 'Your changes are live.',
      variant: 'success',
      duration: 5000,
      placement: 'bottom-right'
    })
  })
</script>

<lumen-sonner aria-label="Notifications"></lumen-sonner>
<lumen-button id="notify">Show toast</lumen-button>

<script type="module">
  // Listen for toast events globally
  document.addEventListener('ui:toast', (event) => {
    console.log('Toast created:', event.detail.title)
  })

  // Listen for form validation events
  document.querySelector('form').addEventListener('ui:invalid', (event) => {
    console.log('Invalid controls:', event.detail.controls)
  })

  // Listen for rich text commands
  document.addEventListener('ui:editor-command', (event) => {
    console.log('Command executed:', event.detail.command)
  })
</script>