{
  "tag": "ed-split-panel",
  "kind": "component",
  "summary": "Split panels display two adjacent panels, allowing the user to resize them.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/split-panel/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/split-panel/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon"
  ],
  "use": [
    "Two related regions that must be visible at once, where different users (or tasks) need different amounts of space for each — a list beside its detail, a source beside a preview, a tree beside an editor",
    "Side-by-side comparison, where the user shifts space toward whichever side they are focused on",
    "Content in one or both panels that is unpredictable in size, so a single fixed ratio would suit some users poorly",
    "An accountant dragging the divider to give a document preview more room while still keeping the list of postings visible"
  ],
  "notFor": [
    {
      "when": "A temporary side surface that sits over the page and is dismissed after a quick task",
      "instead": "[Drawer](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/drawer)"
    },
    {
      "when": "A substitute for switching between full views the user only sees one at a time",
      "instead": "tabs or separate pages"
    }
  ],
  "rules": [
    {
      "id": "split-panel/only-when-the-ratio-matters",
      "rule": "Use a split panel only when the user genuinely benefits from controlling the ratio between two persistent panels. For a layout users never need to resize, where one ratio serves everyone — the ideal split is known and users would never change it — use a plain grid or column layout instead.",
      "why": "Only then is a split panel worth its complexity; where the ideal split is fixed, a plain fixed layout is simpler and more predictable."
    },
    {
      "id": "split-panel/two-panels",
      "rule": "Never put more than two panels in one divider — build larger layouts by nesting split panels, each with its own divider."
    },
    {
      "id": "split-panel/starting-position",
      "rule": "Set a sensible starting position, so the layout is immediately useful before anyone touches the divider."
    },
    {
      "id": "split-panel/min-max",
      "rule": "Set minimum and maximum sizes, never leaving both panels unconstrained, so neither panel can be dragged so small it becomes unusable or gone, or so large the other panel disappears.",
      "check": "error"
    },
    {
      "id": "split-panel/always-visible-content",
      "rule": "Never put content the user must always see fully into a panel that can be dragged closed."
    },
    {
      "id": "split-panel/primary-panel",
      "rule": "Designate a primary panel when one side should keep its size as the window resizes and the other should absorb the change."
    },
    {
      "id": "split-panel/discoverable-divider",
      "rule": "Keep the divider's built-in handle visible so users discover it can be dragged — if you replace it through the divider slot, make the replacement just as discoverable. Never hide the divider or make it look non-interactive.",
      "why": "A hidden or non-interactive-looking divider leaves users unaware they can resize.",
      "check": "error"
    },
    {
      "id": "split-panel/snap-points",
      "rule": "Consider snap points for positions users return to often, for example a half-and-half split or a comfortable sidebar width."
    },
    {
      "id": "split-panel/narrow-screens",
      "rule": "Stack the two panels vertically, or collapse to a single panel, on narrow and mobile screens where a side-by-side split leaves both panels too cramped — never force a side-by-side split onto narrow screens where neither panel has enough room to be useful.",
      "check": "warning"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "position",
        "property": "position",
        "type": "number",
        "default": "50",
        "description": "The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\ncontainer's initial size."
      },
      {
        "name": "position-in-pixels",
        "property": "positionInPixels",
        "type": "number",
        "description": "The current position of the divider from the primary panel's edge in pixels."
      },
      {
        "name": "orientation",
        "property": "orientation",
        "type": "'horizontal' | 'vertical'",
        "default": "'horizontal'",
        "description": "Sets the split panel's orientation."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables resizing. Note that the position may still change as a result of resizing the host element."
      },
      {
        "name": "primary",
        "property": "primary",
        "type": "'start' | 'end' | undefined",
        "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized."
      },
      {
        "name": "snap",
        "property": "snap",
        "type": "string | undefined",
        "description": "One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n`\"100px 50%\"`."
      },
      {
        "name": "snap-threshold",
        "property": "snapThreshold",
        "type": "number",
        "default": "12",
        "description": "How close the divider must be to a snap point until snapping occurs."
      },
      {
        "name": "aria-label",
        "property": "ariaLabel",
        "type": "null | string",
        "default": "null",
        "description": "The divider's accessible name, replacing the localized \"Resize\" default — set it to tell\nmultiple split panels on one page apart. Mirrored onto the internal separator node, where\nthe role lives — an aria-label left on the host alone would sit on a role-less element and\nbe ignored by assistive tech (house pattern: ed-checkbox)."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "ed-reposition",
        "react": "onEdReposition",
        "description": "Emitted when the divider's position changes."
      }
    ],
    "slots": [
      {
        "name": "start",
        "description": "Content to place in the start panel."
      },
      {
        "name": "end",
        "description": "Content to place in the end panel."
      },
      {
        "name": "divider",
        "description": "The divider. Useful for slotting in a custom icon that renders as a handle."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-split-panel-divider-width",
        "default": "0.25rem",
        "description": "The width of the visible divider. In `rem`, so it grows with the user's base font size; a pixel value freezes it."
      },
      {
        "name": "--ed-split-panel-divider-hit-area",
        "default": "0.75rem",
        "description": "The invisible region around the divider where dragging can occur. This is usually wider than the divider to facilitate easier dragging."
      },
      {
        "name": "--ed-split-panel-min",
        "default": "0%",
        "description": "The minimum allowed size of the primary panel. Keep a unit: a unitless 0 makes the `clamp()` it feeds invalid, and the panel collapses into one pane with no divider."
      },
      {
        "name": "--ed-split-panel-max",
        "default": "100%",
        "description": "The maximum allowed size of the primary panel."
      }
    ],
    "parts": [
      {
        "name": "start",
        "description": "The start panel."
      },
      {
        "name": "end",
        "description": "The end panel."
      },
      {
        "name": "panel",
        "description": "Targets both the start and end panels."
      },
      {
        "name": "divider",
        "description": "The divider that separates the start and end panels."
      },
      {
        "name": "handle",
        "description": "The default drag handle rendered in the center of the divider when no custom divider is slotted."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/split-panel/split-panel.js';",
  "react": {
    "component": "EdSplitPanel",
    "import": "import EdSplitPanel from '@eurodata/eurodata-ui/dist/react/split-panel/index.js';"
  }
}