<svelte:options
  customElement={{
    tag: 'm-action-listbox-item',
    extend: customElementForwardEvents,
  }}
/>

<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.
   *
   *  @slot icon - Use this slot to display an icon in the listbox item.
   */
  import Divider from '../divider/Divider.svelte';

  export type ActionListboxItem = {
    focus: () => void;
  };

  interface Props {
    /**
     * The label displayed for the item.
     */
    label: string;
    /**
     * If `true`, the item will be disabled.
     */
    disabled?: boolean;
    /**
     * Allows to define the item appearance.
     */
    appearance?: 'standard' | 'danger';
    /**
     * Add a divider on top of the item.
     */
    divider?: boolean;
    /**
     * Callback to trigger on item click.
     */
    onclick?: () => void;
  }

  let { label, disabled, appearance, divider, onclick }: Props = $props();

  let buttonEl: HTMLButtonElement;

  export function focus() {
    buttonEl.focus();
  }
</script>

{#if divider}
  <span class="mc-action-list__divider">
    <Divider></Divider>
  </span>
{/if}
<li
  class={{
    'mc-action-list__element': true,
    'mc-action-list__element--danger': appearance === 'danger',
    'mc-action-list__element--disabled': disabled,
  }}
  role="menuitem"
>
  <button bind:this={buttonEl} type="button" class="mc-action-list__button" {disabled} {onclick}>
    {#if $$slots.icon}
      <span class="mc-action-list__icon">
        <slot name="icon" />
      </span>
    {/if}

    <p class="mc-action-list__text">{label}</p>
  </button>
</li>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-action-list {
  padding: 0.5rem 0.5rem;
  margin: 0;
}
.mc-action-list__element {
  height: 2.5rem;
  cursor: pointer;
  border-radius: var(--border-radius-s, 0.25rem);
  flex-grow: 1;
}
.mc-action-list__element:hover {
  background-color: var(--action-listbox-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-action-list__element--danger .mc-action-list__text {
  color: var(--action-listbox-color-text-danger, #c61112);
}
.mc-action-list__element--danger .mc-action-list__icon {
  fill: var(--action-listbox-color-text-danger, #c61112);
}
.mc-action-list__element--danger:hover {
  background-color: var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, 0.1));
}
.mc-action-list__element--disabled .mc-action-list__text {
  color: var(--action-listbox-color-text-disabled, #b3b3b3);
}
.mc-action-list__element--disabled .mc-action-list__icon {
  fill: var(--action-listbox-color-text-disabled, #b3b3b3);
}
.mc-action-list__element--disabled:hover {
  background-color: transparent;
}
.mc-action-list__element--disabled button {
  cursor: not-allowed;
}
.mc-action-list__button {
  background-color: transparent;
  color: var(--action-listbox-color-text-default, #000000);
  border: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  padding: 0 0.25rem;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.mc-action-list__button:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-action-list__text {
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-s, 1.3);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.mc-action-list__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-action-list__divider {
  margin: 0.5rem 0;
}

.mc-action-list__divider {
  display: block;
}</style>
