{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "aspect-ratio",
  "title": "Aspect Ratio",
  "type": "registry:ui",
  "description": "Wraps content (typically images, video, or iframes) at a fixed width:height ratio so it never letterboxes or jumps as it loads. Common ratios: 16/9 for video, 1/1 for avatars, 4/3 for cards.",
  "categories": [
    "layout"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/aspect-ratio/aspect-ratio.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\nconst ratioConverter = {\n  fromAttribute(value: string | null): number {\n    if (!value) return 1\n    if (value.includes('/')) {\n      const [w, h] = value.split('/').map((s) => parseFloat(s.trim()))\n      if (w && h) return w / h\n    }\n    const num = parseFloat(value)\n    return Number.isNaN(num) ? 1 : num\n  },\n  toAttribute(value: number): string {\n    return String(value)\n  },\n}\n\n/**\n * <uip-aspect-ratio> — displays content within a desired ratio.\n *\n * Uses CSS `aspect-ratio` on the host so outer utility classes (grid, flex,\n * rounded, overflow-hidden) apply directly to the sized container.\n */\nexport class UipAspectRatio extends LitElement {\n  static styles = [\n    tailwind,\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        aspect-ratio: var(--uip-aspect-ratio, 1 / 1);\n      }\n    `,\n  ]\n\n  static properties = {\n    ratio: { converter: ratioConverter, reflect: true },\n  }\n\n  ratio = 1\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', 'aspect-ratio')\n  }\n\n  willUpdate() {\n    this.style.setProperty('--uip-aspect-ratio', String(this.ratio))\n  }\n\n  render() {\n    return html`<slot part=\"base\"></slot>`\n  }\n}\n\ncustomElements.get('uip-aspect-ratio') || customElements.define('uip-aspect-ratio', UipAspectRatio)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-aspect-ratio': UipAspectRatio\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/aspect-ratio/aspect-ratio.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}