{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "type": "registry:ui",
  "description": "Inline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.",
  "categories": [
    "data-display"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/kbd/kbd.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\n/**\n * <uip-kbd> — the registry Kbd as a web component. Renders a native <kbd>\n * with React's class string verbatim. Class overrides (React's `className`)\n * target it through `::part(base)`.\n */\nexport class UipKbd extends LitElement {\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: inline-flex; }`]\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'kbd')\n  }\n\n  render() {\n    return html`<kbd\n      part=\"base\"\n      data-slot=\"kbd\"\n      class=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded border px-1.5 font-mono text-xs font-medium select-none\"\n      ><slot></slot\n    ></kbd>`\n  }\n}\n\ncustomElements.get('uip-kbd') || customElements.define('uip-kbd', UipKbd)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-kbd': UipKbd\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/kbd/kbd.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}