/**
 * <tab-ui value="tab1" text="Tab 1" icon="star">
 *   Content for this tab panel.
 * </tab-ui>
 *
 * Child of tabs-ui. Represents one tab panel.
 * The tab button is rendered by the parent tabs-ui, not by tab-ui itself.
 */

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

class UITab extends UIElement {
  static properties = {
    text:     { type: String,  default: '', reflect: true },
    value:    { type: String,  default: '', reflect: true },
    icon:     { type: String,  default: '', reflect: true },
    disabled: { type: Boolean, default: false, reflect: true },
  };

  static template = () => null;

  connected() {
    this.setAttribute('role', 'tabpanel');
  }

  render() {
    if (this.text) this.setAttribute('aria-label', this.text);
    if (this.disabled) this.setAttribute('aria-disabled', 'true');
    else this.removeAttribute('aria-disabled');
  }
}
customElements.define('tab-ui', UITab);

export { UITab };
