{% props id: String, size: String = "", placeholder: String = "Type a command or search…", open: bool = false, inner_block: Slot %}
{# size="dialog" makes it a palette in a native <dialog> with key hints; otherwise it's embedded inline #}
{%- if size == "dialog" %}
<dialog class="ui-command" data-size="dialog" id="{{ id }}" aria-label="Command palette" data-ui="command"{% if open %} open{% end %}>
{%- else %}
<div class="ui-command"{% if !size.is_empty() %} data-size="{{ size }}"{% end %} id="{{ id }}" data-ui="command">
{%- end %}
<div class="ui-command-input"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><input placeholder="{{ placeholder }}" aria-label="Command" role="combobox" aria-expanded="true" aria-controls="{{ id }}-list" data-ui-part="input"></div>
<div class="ui-command-list" role="listbox" id="{{ id }}-list" data-ui-part="list">{{ inner_block }}</div>
{%- if size == "dialog" %}
<div class="ui-command-footer"><span><kbd class="ui-kbd">↑</kbd><kbd class="ui-kbd">↓</kbd>to navigate</span><span><kbd class="ui-kbd">↵</kbd>to select</span><span><kbd class="ui-kbd">Esc</kbd>to close</span></div>
</dialog>
{%- else %}
</div>
{%- end %}