Priority List

<zn-priority-list label="Task Priority">
  <div value="bug-fixes">Bug Fixes</div>
  <div value="new-features">New Features</div>
  <div value="documentation">Documentation</div>
  <div value="testing">Testing</div>
</zn-priority-list>

<zn-priority-list label="Deployment Order" help-text="Drag items to set the deployment sequence">
  <div value="database">Database Migrations</div>
  <div value="backend">Backend Services</div>
  <div value="frontend">Frontend App</div>
  <div value="cdn">CDN Cache Invalidation</div>
</zn-priority-list>

<zn-priority-list label="Processing Order" label-tooltip="Items will be processed from highest to lowest priority" help-text="Drag to reorder">
  <div value="validation">Input Validation</div>
  <div value="transform">Data Transformation</div>
  <div value="enrichment">Data Enrichment</div>
  <div value="storage">Storage</div>
</zn-priority-list>

<zn-priority-list label="Release Pipeline" order="testing,staging,production,development">
  <div value="development">Development</div>
  <div value="testing">Testing</div>
  <div value="staging">Staging</div>
  <div value="production">Production</div>
</zn-priority-list>

<zn-priority-list label="Priority Queue" priority-start="0">
  <div value="critical">Critical</div>
  <div value="high">High</div>
  <div value="medium">Medium</div>
  <div value="low">Low</div>
</zn-priority-list>

<zn-priority-list label="Small" size="small">
  <div value="a">Item A</div>
  <div value="b">Item B</div>
  <div value="c">Item C</div>
</zn-priority-list>
<br />
<zn-priority-list label="Medium" size="medium">
  <div value="a">Item A</div>
  <div value="b">Item B</div>
  <div value="c">Item C</div>
</zn-priority-list>
<br />
<zn-priority-list label="Large" size="large">
  <div value="a">Item A</div>
  <div value="b">Item B</div>
  <div value="c">Item C</div>
</zn-priority-list>

<zn-priority-list label="Locked Order" disabled>
  <div value="first">First</div>
  <div value="second">Second</div>
  <div value="third">Third</div>
</zn-priority-list>

<zn-priority-list label="Feature Roadmap">
  <div value="auth">
    <strong>Authentication</strong>
    <br /><small>OAuth2 + SSO integration</small>
  </div>
  <div value="dashboard">
    <strong>Dashboard</strong>
    <br /><small>Analytics and reporting</small>
  </div>
  <div value="api">
    <strong>Public API</strong>
    <br /><small>REST and GraphQL endpoints</small>
  </div>
  <div value="mobile">
    <strong>Mobile App</strong>
    <br /><small>iOS and Android support</small>
  </div>
</zn-priority-list>

<zn-priority-list id="action-list" label="Task Queue">
  <div value="deploy">Deploy to Production</div>
  <zn-button slot="action-deploy" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=deploy]').remove()">
    <zn-icon src="delete" size="16"></zn-icon>
  </zn-button>

  <div value="review">Code Review</div>
  <zn-button slot="action-review" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=review]').remove()">
    <zn-icon src="delete" size="16"></zn-icon>
  </zn-button>

  <div value="test">Run Test Suite</div>
  <zn-button slot="action-test" variant="text" theme="danger" onclick="this.closest('zn-priority-list').querySelector('[value=test]').remove()">
    <zn-icon src="delete" size="16"></zn-icon>
  </zn-button>
</zn-priority-list>

<zn-panel flush>
  <zn-priority-list label="Steps" flush move-buttons>
    <zn-tile value="offer" caption="Second chance" description="Offer · Default template · Student 20% (20%)" icon="tag@lu" icon-color="success">
      <zn-chip slot="properties" icon="globe@lu" icon-size="12">1/12</zn-chip>
      <small slot="properties">100% reach it</small>
    </zn-tile>
    <zn-button slot="action-offer" icon="pencil@lu" icon-size="16" icon-button="small" plain tooltip="Edit"></zn-button>
    <zn-button slot="action-offer" icon="trash-2@lu" icon-size="16" icon-button="small" plain tooltip="Delete"></zn-button>
    <zn-tile value="message" caption="Before you go" href="#" description="Message · Retention copy" icon="message-square@lu" icon-color="ai">
      <zn-chip slot="properties" icon="globe@lu" icon-size="12">1/12</zn-chip>
      <small slot="properties">81% reach it</small>
    </zn-tile>
    <zn-button slot="action-message" icon="pencil@lu" icon-size="16" icon-button="small" plain tooltip="Edit"></zn-button>
    <zn-button slot="action-message" icon="trash-2@lu" icon-size="16" icon-button="small" plain tooltip="Delete"></zn-button>
    <zn-tile value="survey" caption="Exit survey" description="Survey · Why are you leaving?" icon="circle-check@lu" icon-color="warning">
      <zn-chip slot="properties" icon="globe@lu" icon-size="12">1/12</zn-chip>
      <small slot="properties">64% reach it</small>
    </zn-tile>
    <zn-button slot="action-survey" icon="pencil@lu" icon-size="16" icon-button="small" plain tooltip="Edit"></zn-button>
    <zn-button slot="action-survey" icon="trash-2@lu" icon-size="16" icon-button="small" plain tooltip="Delete"></zn-button>
    <zn-tile value="confirm" caption="Confirmation" description="Separate confirmation step · always the final step"
             locked>
      <small slot="properties">58% reach it</small>
    </zn-tile>
  </zn-priority-list>
</zn-panel>

<form id="priority-form">
  <zn-priority-list name="priority" label="Reorder and Submit">
    <div value="alpha">Alpha</div>
    <div value="beta">Beta</div>
    <div value="gamma">Gamma</div>
  </zn-priority-list>
  <br />
  <zn-button type="submit">Submit</zn-button>
</form>

<br />
<pre id="priority-output">Submit the form to see the data</pre>

<script type="module">
  const form = document.getElementById('priority-form');
  const output = document.getElementById('priority-output');

  form.addEventListener('submit', event => {
    event.preventDefault();
    const formData = new FormData(form);
    const entries = [...formData.entries()].map(([key, val]) => `${key} = ${val}`);
    output.textContent = entries.join('\n');
  });
</script>

<zn-priority-list id="event-list" label="Reorder to see events">
  <div value="red">Red</div>
  <div value="green">Green</div>
  <div value="blue">Blue</div>
</zn-priority-list>

<br />
<pre id="event-output">Reorder items to see the priority map</pre>

<script type="module">
  const list = document.getElementById('event-list');
  const output = document.getElementById('event-output');

  list.addEventListener('zn-reorder', () => {
    const map = list.getPriorityMap();
    output.textContent = JSON.stringify(map, null, 2);
  });
</script>