<%= render_component_tag :button, id: @id, "x-ref": @name, "data-tab": @name, class: [ "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2", { "px-1": @theme == :toolbar, "px-2 text-lg relative -bottom-px": @theme == :page, } ], ":class": "{ 'border-lookbook-tabs-border-active': isSelected($el), 'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el), '!text-lookbook-tabs-text-disabled': isDisabled($el), 'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position} }", "x-on:click.prevent": "selectTab($el)", "x-on:keydown.window.prevent.#{@hotkey}": @hotkey.present? ? "$el.click()" : nil, data: { disabled: @disabled }, cloak: true do %> <%== label %> <% end %>