{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "separator",
  "title": "Separator",
  "type": "registry:ui",
  "description": "Horizontal or vertical visual divider — a `<div>` with the right ARIA role and a registry-token border color. Use between sections, list rows, and toolbar groups.",
  "categories": [
    "layout"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/separator/separator.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\n/**\n * <uip-separator> — the registry Separator (Radix Separator) as a web component.\n *\n * React's class string verbatim on an inner <div>. Like Radix: decorative\n * (the default) renders role=\"none\"; `decorative=false` renders\n * role=\"separator\" with aria-orientation for vertical ones. Set\n * `decorative=\"false\"` or `.decorative=${false}`.\n *\n * The host is `display: contents`, so the inner div is laid out directly by\n * the parent (its `h-full` / `w-full` resolve against the flex/grid parent the\n * same way React's div does). Because the host generates no box, margins and\n * other overrides (React's `className`) go on `::part(base)`, e.g.\n * `class=\"[&::part(base)]:my-3\"`.\n */\nexport class UipSeparator extends LitElement {\n  static styles = [tailwind, css`:host { display: contents; }`]\n\n  static properties = {\n    orientation: { reflect: true },\n    decorative: {\n      reflect: true,\n      converter: {\n        fromAttribute: (v: string | null) => v !== 'false',\n        toAttribute: (v: boolean) => String(v),\n      },\n    },\n  }\n\n  orientation: 'horizontal' | 'vertical' = 'horizontal'\n  decorative = true\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', 'separator')\n  }\n\n  willUpdate() {\n    this.setAttribute('data-orientation', this.orientation)\n  }\n\n  render() {\n    const vertical = this.orientation === 'vertical'\n    return html`<div\n      part=\"base\"\n      data-slot=\"separator\"\n      data-orientation=${this.orientation}\n      role=${this.decorative ? 'none' : 'separator'}\n      aria-orientation=${!this.decorative && vertical ? 'vertical' : nothing}\n      class=\"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\"\n    ></div>`\n  }\n}\n\ncustomElements.get('uip-separator') || customElements.define('uip-separator', UipSeparator)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-separator': UipSeparator\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/separator/separator.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}