<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the select, used to associate the label with the form element.
     */
    id: string;
    /**
     * The name attribute for the select element, used for form submission.
     */
    name?: string;
    /**
     * Define the available choices for the select element.
     */
    options: Array<{
      id?: string;
      text: string;
      value: string | number;
      disabled?: boolean;
    }>;
    /**
     * The current value of the select.
     */
    value?: string | number;
    /**
     * Text displayed when the select has no selected value.
     */
    placeholder?: string;
    /**
     * If `true`, the select is marked as invalid.
     */
    isinvalid?: boolean;
    /**
     * If `true`, the select is disabled and non-interactive.
     */
    disabled?: boolean;
    /**
     * Determines the size of the select.
     */
    size?: 's' | 'm';
    /**
     * If `true`, the select is read-only (cannot be edited).
     */
    readonly?: boolean;
  }

  let {
    id,
    name,
    value = $bindable(),
    placeholder,
    size = 'm',
    isinvalid,
    disabled,
    readonly,
    options,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div class={['mc-select', `mc-select--${size}`, className]}>
  <select
    {id}
    class={[
      'mc-select__control',
      readonly && 'mc-select__control--readonly',
      isinvalid && 'is-invalid',
    ]}
    {name}
    {disabled}
    bind:value
    {...attrs}
  >
    {#if placeholder}
      <option value="" disabled selected>
        -- {placeholder} --
      </option>
    {/if}

    {#each options as option, index (index)}
      <option disabled={option.disabled} value={option.value}>
        {option.text}
      </option>
    {/each}
  </select>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
/* stylelint-disable string-no-newline */
.mc-select {
  position: relative;
  display: block;
  width: 100%;
}
.mc-select::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-color: var(--forms-color-icon-interactive, #000000);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-select__control {
  appearance: none;
  font-family: inherit;
  transition: box-shadow 200ms ease;
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  height: 3rem;
  padding: 0 3rem 0 0.75rem;
  background-position: right 1rem center;
  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
  display: block;
  width: 100%;
  color: var(--forms-color-text-default, #000000);
  background-color: var(--forms-color-background-default, #ffffff);
  text-overflow: ellipsis;
  border-radius: var(--border-radius-s, 0.25rem);
}
.mc-select__control:hover {
  border-color: var(--forms-color-border-hover, #4d4d4d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
}
.mc-select__control:focus {
  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-select__control:disabled {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  border-color: transparent;
  cursor: not-allowed;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
}
.mc-select__control--readonly {
  border-color: var(--forms-color-border-read-only, #cccccc);
  pointer-events: none;
}
.mc-select__control.is-invalid {
  border-color: var(--forms-color-border-invalid, #ea302d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
}
.mc-select__control.is-invalid:hover {
  border-color: var(--forms-color-border-invalid-hover, #c61112);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
}
.mc-select--s .mc-select__control {
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
  height: 2rem;
  padding: 0 2rem 0 0.5rem;
  background-position: right 0.5rem center;
}

/* stylelint-enable string-no-newline */</style>
