Command palette 1.2.2
The <velin-command> component is a filterable command overlay (⌘K-style). Call open() / close() from your app shell. Added in 0.7.5. Deutsch: Befehlspalette
Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.
When to use
- Quick find / command palette flows with
<velin-command>for jumping to actions or pages. - Keyboard-first power-user shortcuts when a searchable list of commands fits better than nested menus.
When not
Example
<button id="open-cmd">Open palette</button>
<velin-command id="cmd">
<button type="button">Dashboard</button>
</velin-command>
JavaScript API
| Method | Description |
|---|---|
open() | Show the palette and focus the filter field |
close() | Dismiss the overlay |
Import
Load the bundle once, then use the custom element in your markup:
<script type="module" src="../../dist/velinstyle-components.min.js"></script>
<velin-command>…</velin-command>
Accessibility
open()moves focus to the filter field; ensure the trigger remains keyboard-reachable when the palette closes.- Provide clear labels for commands; do not rely on icons alone.