{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [],
  "description": "APG toggle button: native button with aria-pressed true|false. Label must stay stable (state is aria-pressed, not label text). Controlled pressed / defaultPressed + onPressedChange, full native button props, and consumer-first cancellable event composition. Composition via renderHeidiElement.",
  "files": [
    {
      "content": "\"use client\";\n\n/**\n * heidi-ui Toggle — APG toggle button (aria-pressed).\n * Label stays stable; pressed state is aria-pressed only.\n * Controlled: pressed / defaultPressed + onPressedChange.\n * `disabled` → native disabled + data-disabled.\n *\n * RSC rule: named exports from Server Components; Toggle.X is client sugar.\n */\n\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  useCallback,\n  useState,\n  type ReactNode,\n  type Ref\n} from \"react\";\nimport { nativeDisabledAttrs } from \"../_internal/disabled\";\nimport {\n  composeHeidiEventHandlers,\n  renderHeidiElement,\n  type HeidiIntrinsicHostProps\n} from \"../_internal/render-element\";\nimport { TOGGLE_CLASSES } from \"./toggle.classes.generated\";\n\nexport type ToggleRootState = { disabled: boolean; pressed: boolean };\n\ntype ToggleRootNativeProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  | \"aria-pressed\"\n  | \"children\"\n  | \"className\"\n  | \"disabled\"\n  | \"onClick\"\n  | \"ref\"\n  | \"style\"\n  | \"type\"\n>;\n\nexport type ToggleRootProps = HeidiIntrinsicHostProps<\n  ToggleRootState,\n  \"button\"\n> &\n  ToggleRootNativeProps & {\n    children?: ReactNode;\n    defaultPressed?: boolean;\n    disabled?: boolean;\n    onClick?: ComponentPropsWithoutRef<\"button\">[\"onClick\"];\n    onPressedChange?: (pressed: boolean) => void;\n    pressed?: boolean;\n    ref?: Ref<HTMLButtonElement>;\n  };\n\nexport function ToggleRoot({\n  children,\n  className,\n  defaultPressed = false,\n  disabled = false,\n  onClick,\n  onPressedChange,\n  pressed: pressedProp,\n  ref,\n  render,\n  style,\n  ...nativeProps\n}: ToggleRootProps) {\n  const [internal, setInternal] = useState(defaultPressed);\n  const controlled = pressedProp !== undefined;\n  const pressed = pressedProp ?? internal;\n\n  const setPressed = useCallback(\n    (next: boolean) => {\n      if (!controlled) {\n        setInternal(next);\n      }\n      onPressedChange?.(next);\n    },\n    [controlled, onPressedChange]\n  );\n  const handleClick = composeHeidiEventHandlers(\n    onClick,\n    (event: MouseEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n      setPressed(!pressed);\n    }\n  );\n\n  return renderHeidiElement({\n    className: TOGGLE_CLASSES.root,\n    dataPart: \"toggle-root\",\n    element: \"button\",\n    props: {\n      ...nativeProps,\n      \"aria-pressed\": pressed,\n      children,\n      \"data-state\": pressed ? \"on\" : \"off\",\n      onClick: handleClick,\n      ref,\n      type: \"button\",\n      ...nativeDisabledAttrs(disabled)\n    },\n    renderProps: { className, render, style },\n    state: { disabled, pressed }\n  });\n}\n\nexport const Toggle = {\n  Root: ToggleRoot\n} as const;\n",
      "path": "packages/heidi-ui/src/toggle/toggle.tsx",
      "target": "components/ui/heidi/toggle/toggle.tsx",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui toggle — STRUCTURAL CSS only. No --hui-*.\n */\n\n@layer heidi-ui-base {\n  .hui-toggle-root {\n    display: inline-flex;\n  }\n}\n",
      "path": "packages/heidi-ui/src/toggle/toggle.base.css",
      "target": "components/ui/heidi/toggle/toggle.base.css",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui toggle — VISUAL theme (opt-in). Consumes --hui-*.\n */\n\n@layer heidi-ui {\n  .hui-toggle-root {\n    align-items: center;\n    background: var(--hui-color-bg-elevated);\n    border: var(--hui-border-width) var(--hui-border-style) var(--hui-color-border-default);\n    border-radius: var(--hui-radius-md);\n    color: var(--hui-color-fg-default);\n    cursor: pointer;\n    font: inherit;\n    gap: var(--hui-space-1);\n    justify-content: center;\n    padding: var(--hui-space-1-5) var(--hui-space-3);\n  }\n\n  .hui-toggle-root:hover {\n    background: var(--hui-color-interactive-ghost-bg-hover);\n  }\n\n  .hui-toggle-root:focus-visible {\n    outline: var(--hui-focus-ring-width) solid var(--hui-color-focus-ring);\n    outline-offset: var(--hui-focus-ring-offset);\n  }\n\n  .hui-toggle-root[data-state=\"off\"] {\n    background: var(--hui-color-bg-elevated);\n  }\n\n  .hui-toggle-root[data-state=\"on\"] {\n    background: var(--hui-color-brand-primary);\n    border-color: var(--hui-color-brand-primary);\n    color: var(--hui-color-on-brand, #fff);\n  }\n\n  /* ponytail: the pressed state has to out-rank a plain hover ground, and it\n     has to own background AND color together. The README's documented\n     Toolbar+Toggle recipe puts both classes on one element, and\n     `.hui-toolbar-button:hover` (0,2,0, imported after this sheet) beat the\n     equally specific `[data-state=\"on\"]` — it repainted the ground while the\n     `--hui-color-on-brand` white text survived, ~1.05:1 on the page. Mirrors\n     toggle-group's existing `[data-state=\"on\"]:hover`. Rejected bumping the\n     rest state to `.hui-toggle-root.hui-toggle-root[data-state=\"on\"]`: that\n     would also out-rank the forced-colors block below, which is why the\n     forced-colors on-state rule gains the same `:hover` selector. */\n  .hui-toggle-root[data-state=\"on\"]:hover {\n    background: var(--hui-color-brand-primary);\n    border-color: var(--hui-color-brand-primary);\n    color: var(--hui-color-on-brand, #fff);\n  }\n\n  .hui-toggle-root:disabled,\n  .hui-toggle-root[data-disabled=\"true\"] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* ponytail: scoped off the pressed state because this rule reset the ground\n     without resetting the foreground — a disabled+pressed Toggle hovered in\n     the light scheme painted `--hui-color-on-brand` white on\n     `--hui-color-bg-elevated` white and the label vanished. Rejected adding\n     `color: var(--hui-color-fg-default)` here: it keeps the label legible but\n     makes a DISABLED control change appearance on hover, which is the wrong\n     affordance. Excluding the pressed state means disabled+pressed simply does\n     not respond to hover. Same shape in toggle-group.theme.css. */\n  .hui-toggle-root:disabled:hover:not([data-state=\"on\"]),\n  .hui-toggle-root[data-disabled=\"true\"]:hover:not([data-state=\"on\"]) {\n    background: var(--hui-color-bg-elevated);\n  }\n\n  @media (forced-colors: active) {\n    .hui-toggle-root {\n      background: Canvas;\n      border-color: CanvasText;\n      color: CanvasText;\n      forced-color-adjust: none;\n    }\n\n    .hui-toggle-root[data-state=\"on\"],\n    .hui-toggle-root[data-state=\"on\"]:hover {\n      background: Highlight;\n      border-color: Highlight;\n      color: HighlightText;\n    }\n\n    .hui-toggle-root:focus-visible {\n      outline-color: Highlight;\n    }\n\n    .hui-toggle-root:disabled,\n    .hui-toggle-root[data-disabled=\"true\"] {\n      border-color: GrayText;\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n}\n",
      "path": "packages/heidi-ui/src/toggle/toggle.theme.css",
      "target": "components/ui/heidi/toggle/toggle.theme.css",
      "type": "registry:ui"
    },
    {
      "content": "/*\n * heidi-ui toggle — aggregator.\n */\n\n@import \"./toggle.base.css\";\n@import \"../../../../styles/heidi-ui-adapter.css\";\n@import \"./toggle.theme.css\";\n",
      "path": "packages/heidi-ui/src/toggle/toggle.css",
      "target": "components/ui/heidi/toggle/toggle.css",
      "type": "registry:ui"
    },
    {
      "content": "/** GENERATED from packages/heidi-ui/src/toggle/toggle.base.css + packages/heidi-ui/src/toggle/toggle.theme.css — do not edit by hand.\n * Rebuild: `bun run hui:build`. Freshness: `bun run contracts:check`. */\nexport const TOGGLE_CLASSES = {\n  root: \"hui-toggle-root\",\n} as const;\n",
      "path": "packages/heidi-ui/src/toggle/toggle.classes.generated.ts",
      "target": "components/ui/heidi/toggle/toggle.classes.generated.ts",
      "type": "registry:ui"
    },
    {
      "content": "/** GENERATED from toggle.anatomy.json + toggle.base.css + toggle.theme.css — do not edit by hand.\n * Rebuild: `bun run hui:build`. Freshness: `bun run contracts:check`. */\n\nexport type ToggleDisabled = \"true\";\nexport type ToggleState = \"off\" | \"on\";\n\nexport const TOGGLE_ANATOMY = {\n  \"component\": \"toggle\",\n  \"description\": \"APG toggle button: native button with aria-pressed true|false. Label must stay stable (state is aria-pressed, not label text). Controlled pressed / defaultPressed + onPressedChange, full native button props, and consumer-first cancellable event composition. Composition via renderHeidiElement.\",\n  \"schemaVersion\": 2,\n  \"parts\": {\n    \"root\": {\n      \"aria\": {\n        \"owns\": [\n          \"aria-pressed\"\n        ],\n        \"role\": null\n      },\n      \"class\": \"hui-toggle-root\",\n      \"css\": {\n        \"structural\": []\n      },\n      \"dataPart\": \"toggle-root\",\n      \"description\": \"Toggle button; aria-pressed conveys on/off. Space/Enter activate through the native button. Native handlers run once before the pressed-state transition and may cancel it with preventDefault.\",\n      \"element\": \"button\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"defaultPressed\",\n        \"disabled\",\n        \"onClick\",\n        \"onPressedChange\",\n        \"pressed\",\n        \"ref\",\n        \"render\",\n        \"style\"\n      ],\n      \"pseudoStates\": [\n        \":disabled\",\n        \":focus-visible\",\n        \":hover\"\n      ],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-state\": [\n          \"off\",\n          \"on\"\n        ]\n      }\n    }\n  },\n  \"rootProps\": [\n    \"defaultPressed\",\n    \"disabled\",\n    \"onPressedChange\",\n    \"pressed\"\n  ],\n  \"tokens\": [\n    \"--hui-border-style\",\n    \"--hui-border-width\",\n    \"--hui-color-bg-elevated\",\n    \"--hui-color-border-default\",\n    \"--hui-color-brand-primary\",\n    \"--hui-color-fg-default\",\n    \"--hui-color-focus-ring\",\n    \"--hui-color-interactive-ghost-bg-hover\",\n    \"--hui-color-on-brand\",\n    \"--hui-focus-ring-offset\",\n    \"--hui-focus-ring-width\",\n    \"--hui-radius-md\",\n    \"--hui-space-1\",\n    \"--hui-space-1-5\",\n    \"--hui-space-3\"\n  ]\n} as const;\n",
      "path": "packages/heidi-ui/src/toggle/toggle.anatomy.generated.ts",
      "target": "components/ui/heidi/toggle/toggle.anatomy.generated.ts",
      "type": "registry:ui"
    },
    {
      "content": "{\n  \"component\": \"toggle\",\n  \"description\": \"APG toggle button: native button with aria-pressed true|false. Label must stay stable (state is aria-pressed, not label text). Controlled pressed / defaultPressed + onPressedChange, full native button props, and consumer-first cancellable event composition. Composition via renderHeidiElement.\",\n  \"schemaVersion\": 2,\n  \"parts\": {\n    \"root\": {\n      \"aria\": {\n        \"owns\": [\n          \"aria-pressed\"\n        ],\n        \"role\": null\n      },\n      \"class\": \"hui-toggle-root\",\n      \"css\": {\n        \"structural\": []\n      },\n      \"dataPart\": \"toggle-root\",\n      \"description\": \"Toggle button; aria-pressed conveys on/off. Space/Enter activate through the native button. Native handlers run once before the pressed-state transition and may cancel it with preventDefault.\",\n      \"element\": \"button\",\n      \"nativeProps\": true,\n      \"props\": [\n        \"className\",\n        \"defaultPressed\",\n        \"disabled\",\n        \"onClick\",\n        \"onPressedChange\",\n        \"pressed\",\n        \"ref\",\n        \"render\",\n        \"style\"\n      ],\n      \"pseudoStates\": [\n        \":disabled\",\n        \":focus-visible\",\n        \":hover\"\n      ],\n      \"states\": {\n        \"data-disabled\": [\n          \"true\"\n        ],\n        \"data-state\": [\n          \"off\",\n          \"on\"\n        ]\n      }\n    }\n  },\n  \"rootProps\": [\n    \"defaultPressed\",\n    \"disabled\",\n    \"onPressedChange\",\n    \"pressed\"\n  ]\n}\n",
      "path": "packages/heidi-ui/src/toggle/toggle.anatomy.json",
      "target": "components/ui/heidi/toggle/toggle.anatomy.json",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Cross-cutting disabled attrs for heidi-ui interactive hosts.\n *\n * House convention (Phase 23):\n * - Button widgets → native `disabled` + `data-disabled=\"true\"` (CSS + a11y).\n * - Non-button options (Select.Item) → `aria-disabled` + `data-disabled=\"true\"`\n *   (native disabled is invalid on role=option divs).\n * - Group roots may cascade `disabled` to children and mirror `data-disabled`.\n * - Keyboard nav / activation always skip disabled hosts.\n */\n\nexport type NativeDisabledAttrs = {\n  \"data-disabled\"?: true;\n  disabled?: true;\n};\n\nexport type AriaDisabledAttrs = {\n  \"aria-disabled\"?: true;\n  \"data-disabled\"?: true;\n};\n\nexport type DataDisabledAttrs = {\n  \"data-disabled\"?: true;\n};\n\n/** Native button/input disabled + styling hook. */\nexport function nativeDisabledAttrs(disabled: boolean | undefined): NativeDisabledAttrs {\n  if (!disabled) {\n    return {};\n  }\n  return {\n    \"data-disabled\": true,\n    disabled: true\n  };\n}\n\n/** ARIA-disabled for non-native hosts (e.g. role=option). */\nexport function ariaDisabledAttrs(disabled: boolean | undefined): AriaDisabledAttrs {\n  if (!disabled) {\n    return {};\n  }\n  return {\n    \"aria-disabled\": true,\n    \"data-disabled\": true\n  };\n}\n\n/** Styling hook only (group roots that cascade disabled). */\nexport function dataDisabledAttrs(disabled: boolean | undefined): DataDisabledAttrs {\n  if (!disabled) {\n    return {};\n  }\n  return {\n    \"data-disabled\": true\n  };\n}\n\nexport function isDisabledElement(el: Element | null | undefined): boolean {\n  if (!el || !(el instanceof HTMLElement)) {\n    return false;\n  }\n  if (el.matches(\":disabled\")) {\n    return true;\n  }\n  return el.getAttribute(\"aria-disabled\") === \"true\" || el.getAttribute(\"data-disabled\") === \"true\";\n}\n",
      "path": "packages/heidi-ui/src/_internal/disabled.ts",
      "target": "components/ui/heidi/_internal/disabled.ts",
      "type": "registry:ui"
    },
    {
      "content": "/**\n * Shared host rendering for heidi-ui parts — Base-UI-shaped composition\n * (docs/HEIDI-UI-HEADLESS.md § 4 / HEIDI-UI.md § 4.5):\n *   - className / style as value or (state) => value\n *   - render as ReactElement or (props, state) => ReactElement\n *   - ref forwarding\n *   - data-hui-part always set (stable unstyled hook)\n *\n * Structural inline styles (e.g. anchorName) are merged last so a consumer\n * style override cannot drop platform wiring.\n */\n\nimport {\n  cloneElement,\n  createElement,\n  isValidElement,\n  type CSSProperties,\n  type ComponentPropsWithRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefCallback\n} from \"react\";\n\nexport type HeidiClassName<State> = string | ((state: State) => string | undefined) | undefined;\n\nexport type HeidiStyle<State> =\n  | CSSProperties\n  | ((state: State) => CSSProperties | undefined)\n  | undefined;\n\nexport type HeidiRenderFn<State, Props> = (\n  props: Props,\n  state: State\n) => ReactElement;\n\nexport type HeidiRender<State, Props> =\n  | ReactElement\n  | HeidiRenderFn<State, Props>\n  | undefined;\n\ntype DefaultRenderProps = HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> };\n\nexport type HeidiHostProps<\n  State,\n  RenderProps extends object = DefaultRenderProps\n> = {\n  className?: HeidiClassName<State>;\n  render?: HeidiRender<State, RenderProps>;\n  style?: HeidiStyle<State>;\n};\n\nexport type HeidiIntrinsicHostProps<\n  State,\n  Tag extends keyof HTMLElementTagNameMap\n> = HeidiHostProps<State, ComponentPropsWithRef<Tag>>;\n\nfunction resolveClassName<State>(\n  className: HeidiClassName<State>,\n  state: State\n): string | undefined {\n  return typeof className === \"function\" ? className(state) : className;\n}\n\nfunction resolveStyle<State>(style: HeidiStyle<State>, state: State): CSSProperties | undefined {\n  return typeof style === \"function\" ? style(state) : style;\n}\n\nfunction mergeClassNames(...parts: Array<string | undefined>): string | undefined {\n  const merged = parts.filter(Boolean).join(\" \");\n  return merged.length > 0 ? merged : undefined;\n}\n\n/**\n * Compose a consumer event with library behavior. Consumers run first and may\n * cancel the component behavior with `event.preventDefault()`. Heidi keeps\n * this native-event convention intentionally: it avoids a second branded event\n * API while still making async/controlled actions vetoable.\n */\nexport function composeHeidiEventHandlers<Event extends { defaultPrevented: boolean }>(\n  consumer: ((event: Event) => void) | undefined,\n  library: (event: Event) => void\n): (event: Event) => void {\n  return (event) => {\n    consumer?.(event);\n    if (!event.defaultPrevented) {\n      library(event);\n    }\n  };\n}\n\n/** React 19-safe ref fan-out, including callback-ref cleanup functions. */\nexport function mergeHeidiRefs<Element>(\n  ...inputRefs: Array<Ref<Element> | undefined>\n): Ref<Element> | undefined {\n  const refs = Array.from(\n    new Set(\n      inputRefs.filter(\n        (ref): ref is Exclude<Ref<Element>, null> => ref != null\n      )\n    )\n  );\n  if (refs.length === 0) {\n    return undefined;\n  }\n  if (refs.length === 1) {\n    return refs[0];\n  }\n\n  let cache = mergedRefCache;\n  for (const ref of refs) {\n    const key = ref as object;\n    let child = cache.children.get(key);\n    if (!child) {\n      child = { children: new WeakMap() };\n      cache.children.set(key, child);\n    }\n    cache = child;\n  }\n  if (cache.callback) {\n    return cache.callback as RefCallback<Element>;\n  }\n\n  const callback: RefCallback<Element> = (node) => {\n    const cleanups: Array<() => void> = [];\n    for (const ref of refs) {\n      if (typeof ref === \"function\") {\n        const cleanup = ref(node);\n        if (node !== null) {\n          cleanups.push(typeof cleanup === \"function\" ? cleanup : () => ref(null));\n        }\n      } else if (ref) {\n        ref.current = node;\n        if (node !== null) {\n          cleanups.push(() => {\n            ref.current = null;\n          });\n        }\n      }\n    }\n    return cleanups.length > 0\n      ? () => {\n          for (const cleanup of cleanups) {\n            cleanup();\n          }\n        }\n      : undefined;\n  };\n  cache.callback = callback as RefCallback<unknown>;\n  return callback;\n}\n\ntype MergedRefCache = {\n  callback?: RefCallback<unknown>;\n  children: WeakMap<object, MergedRefCache>;\n};\n\nconst mergedRefCache: MergedRefCache = { children: new WeakMap() };\n\ntype UnknownHandler = (...args: never[]) => unknown;\n\nfunction isEventHandler(key: string, value: unknown): value is UnknownHandler {\n  return /^on[A-Z]/.test(key) && typeof value === \"function\";\n}\n\nfunction defaultPrevented(args: unknown[]): boolean {\n  const event = args[0];\n  return (\n    typeof event === \"object\" &&\n    event !== null &&\n    \"defaultPrevented\" in event &&\n    event.defaultPrevented === true\n  );\n}\n\nfunction composeUnknownHandlers(\n  consumer: UnknownHandler,\n  library: UnknownHandler\n): UnknownHandler {\n  if (consumer === library) {\n    return library;\n  }\n  return ((...args: unknown[]) => {\n    (consumer as (...handlerArgs: unknown[]) => unknown)(...args);\n    if (!defaultPrevented(args)) {\n      (library as (...handlerArgs: unknown[]) => unknown)(...args);\n    }\n  }) as UnknownHandler;\n}\n\n/** Library-owned host props — permissive so button `type`, `data-*`, `popover`, etc. type-check. */\nexport type HeidiElementProps<Tag extends keyof HTMLElementTagNameMap> = Record<\n  string,\n  unknown\n> & {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElementTagNameMap[Tag]>;\n  style?: CSSProperties;\n};\n\ntype RenderElementParams<\n  State,\n  Tag extends keyof HTMLElementTagNameMap,\n  RenderProps extends object = DefaultRenderProps\n> = {\n  /** Default class from the generated hui-* map (theme/base target). */\n  className?: string;\n  /** Stable machine hook — always emitted. */\n  dataPart: string;\n  /** Intrinsic tag when `render` is omitted. */\n  element: Tag;\n  /** Props the library owns (aria, ids, handlers, popover, …). */\n  props: HeidiElementProps<Tag>;\n  /** Optional consumer composition props. */\n  renderProps?: HeidiHostProps<State, RenderProps>;\n  /** Typed state passed to functional className/style/render. */\n  state: State;\n  /** Structural inline styles that must survive consumer style merges. */\n  structuralStyle?: CSSProperties;\n  /**\n   * Render-element handlers to remove instead of composing. This is reserved\n   * for states such as a focusable disabled composite item where the public\n   * contract requires press handlers to be completely inert.\n   */\n  suppressRenderedHandlers?: readonly string[];\n};\n\n/**\n * Render a heidi-ui host element with optional Base-shaped composition.\n */\nexport function renderHeidiElement<\n  State,\n  Tag extends keyof HTMLElementTagNameMap,\n  RenderProps extends object = DefaultRenderProps\n>(\n  params: RenderElementParams<State, Tag, RenderProps>\n): ReactElement {\n  const {\n    className,\n    dataPart,\n    element,\n    props,\n    renderProps,\n    state,\n    structuralStyle,\n    suppressRenderedHandlers\n  } = params;\n  const consumerClass = resolveClassName(renderProps?.className, state);\n  const consumerStyle = resolveStyle(renderProps?.style, state);\n  const mergedStyle: CSSProperties | undefined =\n    props.style || consumerStyle || structuralStyle\n      ? { ...props.style, ...consumerStyle, ...structuralStyle }\n      : undefined;\n\n  const outProps: HTMLAttributes<HTMLElement> & {\n    \"data-hui-part\": string;\n    ref?: Ref<HTMLElement>;\n  } = {\n    ...(props as HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> }),\n    className: mergeClassNames(consumerClass, className),\n    \"data-hui-part\": dataPart,\n    style: mergedStyle\n  };\n\n  const render = renderProps?.render;\n  if (typeof render === \"function\") {\n    // Post-merge the returned element as well. This deliberately makes the\n    // stable data hook, owned semantics, refs, and internal handlers survive\n    // even when a render function forgets to spread one of the supplied props.\n    return mergeRenderedElement(\n      render(outProps as unknown as RenderProps, state),\n      outProps,\n      dataPart,\n      structuralStyle,\n      suppressRenderedHandlers\n    );\n  }\n  if (isValidElement(render)) {\n    return mergeRenderedElement(\n      render,\n      outProps,\n      dataPart,\n      structuralStyle,\n      suppressRenderedHandlers\n    );\n  }\n\n  return createElement(element, outProps as never, props.children);\n}\n\ntype RenderedProps = Record<string, unknown> & {\n  children?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n  style?: CSSProperties;\n};\n\nfunction mergeRenderedElement(\n  element: ReactElement,\n  libraryProps: HTMLAttributes<HTMLElement> & {\n    \"data-hui-part\": string;\n    ref?: Ref<HTMLElement>;\n  },\n  dataPart: string,\n  structuralStyle: CSSProperties | undefined,\n  suppressRenderedHandlers: readonly string[] | undefined\n): ReactElement {\n  const rendered = element as ReactElement<RenderedProps>;\n  const renderedProps = rendered.props;\n  const renderedClass =\n    renderedProps.className === libraryProps.className\n      ? undefined\n      : renderedProps.className;\n  const merged: RenderedProps = {\n    ...renderedProps,\n    ...libraryProps,\n    className: mergeClassNames(renderedClass, libraryProps.className),\n    \"data-hui-part\": dataPart,\n    ref: mergeHeidiRefs(libraryProps.ref, renderedProps.ref),\n    style: {\n      ...libraryProps.style,\n      ...renderedProps.style,\n      ...structuralStyle\n    }\n  };\n\n  if (Object.prototype.hasOwnProperty.call(renderedProps, \"children\")) {\n    merged.children = renderedProps.children;\n  }\n\n  const suppressedHandlers = suppressRenderedHandlers\n    ? new Set(suppressRenderedHandlers)\n    : null;\n  for (const key of new Set([...Object.keys(renderedProps), ...Object.keys(libraryProps)])) {\n    const consumer = renderedProps[key];\n    const library = (libraryProps as unknown as Record<string, unknown>)[key];\n    if (suppressedHandlers?.has(key)) {\n      merged[key] = library;\n      continue;\n    }\n    if (isEventHandler(key, consumer) && isEventHandler(key, library)) {\n      merged[key] = composeUnknownHandlers(consumer, library);\n    }\n  }\n\n  return cloneElement(rendered, merged as never);\n}\n",
      "path": "packages/heidi-ui/src/_internal/render-element.ts",
      "target": "components/ui/heidi/_internal/render-element.ts",
      "type": "registry:ui"
    }
  ],
  "name": "toggle",
  "registryDependencies": [
    "@heidi-ui/heidi-tokens"
  ],
  "title": "Toggle",
  "type": "registry:ui"
}