/**
 * <traits-host traits="pressable scale-press ripple">
 *   <div>raw markup with trait behaviors attached</div>
 * </traits-host>
 *
 * Tiny pass-through wrapper that extends declarative trait composition
 * to raw HTML. Without this element, only UIElement subclasses can read
 * the `traits=` attribute. Wrap any markup in <traits-host> and the
 * named traits attach to the wrapper itself — events bubble up from
 * children, attribute toggles land on the wrapper, and the children
 * render unaffected.
 *
 * The host uses `display: contents` so it does not introduce a layout
 * box; the wrapped children participate in the parent's flex/grid
 * exactly as if the wrapper were not there.
 *
 * Use this for:
 *   - sprinkling `pressable` onto a custom button you don't want to
 *     turn into a UIElement
 *   - giving a `<dialog>` or `<details>` a `focus-trap` without a
 *     wrapper component
 *   - composing `magnetic-hover` + `tilt-hover` onto an existing
 *     marketing CTA without rewriting it as a component
 *
 * For UIElement subclasses, prefer the bare attribute on the element
 * itself: `<button-ui traits="ripple">…</button-ui>`. The wrapper is
 * for cases where the host element is NOT a UIElement.
 */

import { UIElement } from '../core/element.js';

class TraitsHost extends UIElement {
  static template = () => null;

  connected() {
    // No-op — UIElement reads `traits` attribute and applies behavior.
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('traits-host')) {
  customElements.define('traits-host', TraitsHost);
}

// One-shot stylesheet keeps the host out of the layout flow so children
// render in the parent's box.
if (typeof document !== 'undefined' && document.head && !document.querySelector('#adia-traits-host-style')) {
  const style = document.createElement('style');
  style.id = 'adia-traits-host-style';
  style.textContent = 'traits-host { display: contents; }';
  document.head.appendChild(style);
}

export { TraitsHost };
