Examples

// ✅ Good: Clear, semantic names
export const Default = { /* ... */ };
export const Status = { /* ... */ };
export const StatusFlat = { /* ... */ };
export const FormSubmit = { /* ... */ };

// ❌ Bad: Component name in title
export const BadgeDefault = { /* ... */ };
export const BadgeStatus = { /* ... */ };

// ❌ Bad: Too verbose or unclear
export const Example1 = { /* ... */ };
export const TestCase = { /* ... */ };
export const DefaultBadgeWithStatusColors = { /* ... */ };

/**
 * @summary Basic badge component with default styling. Use for simple non-interactive labels or status indicators.
 */
export const Default = {
  render: () => html`<nve-badge>badge</nve-badge>`
};

export const Status = {
  render: () => html`
    <div nve-layout="row gap:xs">
      <nve-badge status="scheduled">scheduled</nve-badge>
      <nve-badge status="queued">queued</nve-badge>
      <nve-badge status="pending">pending</nve-badge>
    </div>
  `
};

// ✅ Good: Plain HTML with inline styles when needed
export const Overflow = {
  render: () => html`
    <nve-badge status="pending" style="--width: 150px">
      some really long content
    </nve-badge>
  `
};

// ✅ Good: Simple script tags for interactive examples
export const ScrollPosition = {
  render: () => html`
    <nve-grid id="scroll-position-grid" style="height: 402px">
      <!-- grid content -->
    </nve-grid>
    <script type="module">
      const grid = document.querySelector('#scroll-position-grid');
      const button = document.querySelector('#scroll-top-button');
      button.addEventListener('click', () => {
        grid.scrollTo({ top: 0, behavior: 'smooth' });
      });
    </script>
  `
};

/**
 * @summary [Brief description of what this demonstrates and when to use it]
 */
export const ExampleName = {
  render: () => html`
    <!-- Simple, focused HTML demonstrating the pattern -->
  `
};

/**
 * @summary Status badges with predefined colors for different states.
 * Ideal for showing job status, task progress, or system states.
 */
export const Status = {
  render: () => html`
    <div nve-layout="row gap:xs align:wrap">
      <nve-badge status="scheduled">scheduled</nve-badge>
      <nve-badge status="queued">queued</nve-badge>
      <nve-badge status="pending">pending</nve-badge>
    </div>
  `
};

/**
 * @summary [Description of the interactive behavior and when it's useful]
 */
export const InteractiveExample = {
  render: () => html`
    <!-- HTML structure -->
    <script type="module">
      // Simple, focused JavaScript for the interaction
      const element = document.querySelector('#example-element');
      element.addEventListener('click', () => {
        // Minimal interaction logic
      });
    </script>
  `
};

/**
 * @summary [Summary of the pattern,
 * including accessibility considerations and use cases]
 */
export const ComplexPattern = {
  render: () => html`
    <nve-grid>
      <nve-grid-header>
        ${Array(5).fill('').map((_, i) => html`
          <nve-grid-column>column ${i}</nve-grid-column>
        `)}
      </nve-grid-header>
      ${Array(10).fill('').map((_, r) => html`
        <nve-grid-row>
          ${Array(5).fill('').map((_, c) => html`
            <nve-grid-cell>cell ${r}-${c}</nve-grid-cell>
          `)}
        </nve-grid-row>
      `)}
    </nve-grid>
  `
};

/**
 * @summary Badges with predefined status colors for different states.
 * Ideal for showing job status, task progress, or system states.
 */

/**
 * @summary Flat container badges with status colors for a more subtle appearance. Ideal for dense layouts or when you want less visual weight.
 */

/**
 * @summary The datagrid follows the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/data-grids/#kbd_label)
 * for standardized keyboard navigation.
 */

/**
 * @summary Multi Select rows use a checkbox as the first focusable item within the row. When selected set the `selected` attribute/property on the row. This will ensure selected styles as well as the proper `ariaSelected` state for accessibility.
 */

/**
 * @summary Default badge example.
 */

/**
 * @summary Badge examples with status colors.
 */

export const OverlyComplex = {
  render: () => html`<!-- Complex state logic that obscures the example -->`
};