// hive-btn.js — <hive-btn>, the button primitive for modal.js's dialog
// buttons. Autonomous custom element (previously a customized built-in,
// `<button is="hive-btn">` — dropped: `is=` upgrades can't host a shadow
// root at all, which crashed every themed dialog, and reads as a hack
// regardless once you know that). A real `<button>` lives inside the
// shadow root instead, so native click/keyboard activation and
// `:disabled` still come for free — just one level down from the host.
//
// `delegatesFocus: true` on the shadow root means `.focus()` on the host
// (what modal.js calls) focuses the inner button directly, and a click
// anywhere on the host focuses it too, matching native `<button>` feel.
// The inner button's native `click` is a composed event, so it bubbles
// out through the shadow boundary — callers add `click` listeners on the
// `<hive-btn>` host exactly as they would on a plain `<button>`.
//
// Usage: `el('hive-btn', { type: 'button', variant: 'danger' }, 'label')`.
// `variant` ∈ 'cancel' | 'confirm' | 'danger' | unset (neutral default) —
// reflected straight through to the inner button so hive-btn.css's
// `:host([variant="…"])` selectors keep working unchanged.
// `disabled`/`type` are likewise plain attributes on the host, mirrored
// onto the inner button on connect and on every attribute change.

import { attachShadowCss } from '../shadow-css.js';
import hiveBtnCss from './hive-btn.css';

const OBSERVED = ['disabled', 'type'];

class HiveBtn extends HTMLElement {
  static get observedAttributes() {
    return OBSERVED;
  }

  connectedCallback() {
    if (this._btn) {
      this._sync();
      return; // already built (e.g. re-parenting re-fires connectedCallback)
    }
    const root = attachShadowCss(this, hiveBtnCss, { delegatesFocus: true });
    const btn = document.createElement('button');
    btn.append(document.createElement('slot'));
    root.append(btn);
    this._btn = btn;
    this._sync();
  }

  attributeChangedCallback() {
    this._sync();
  }

  _sync() {
    if (!this._btn) return;
    this._btn.disabled = this.hasAttribute('disabled');
    this._btn.type = this.getAttribute('type') || 'button';
  }
}
customElements.define('hive-btn', HiveBtn);