<svelte:options
  customElement={{
    tag: 'm-toggle-group',
    props: {
      options: { reflect: true, type: 'Array', attribute: 'options' },
      inline: { reflect: true, type: 'Boolean', attribute: 'inline' },
    },
    extend: customElementForwardEvents,
  }}
/>

<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.
   */
  interface Props {
    [key: string]: any;
    /**
     * The name attribute for the toggle element, typically used for form submission.
     */
    name: string;
    /**
     * The current value of the toggle group.
     */
    value?: Array<string>;
    /**
     * List of properties of each toggle of the toggle group.
     */
    options: Array<{
      id: string;
      label: string;
      value: string;
      disabled?: boolean;
      size?: 's' | 'm';
    }>;
    /**
     * If `true`, make the form element of the group inline.
     */
    inline?: boolean;
  }

  let {
    name,
    value = $bindable([]),
    options,
    inline,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div class={['mc-field__content', inline && 'mc-field__content--inline', className]} {...attrs}>
  {#each options as option (option.id)}
    <div
      class="mc-toggle mc-field__item {!option.label
        ? ' mc-toggle--hide-label'
        : ''} {option.size === 'm' ? ' mc-toggle--m' : ''}"
    >
      <label class="mc-toggle__container">
        <input
          class="mc-toggle__input"
          id={option.id}
          {name}
          type="checkbox"
          bind:group={value}
          value={option.value}
          disabled={option.disabled}
        />
        {#if option.label}
          <span class="mc-toggle__label">{option.label}</span>
        {/if}
      </label>
    </div>
  {/each}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
/* stylelint-disable string-no-newline */
.mc-field__label, .mc-field__legend {
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
  color: var(--field-color-label, #000000);
}
.mc-field__legend {
  padding-inline: 0;
}
.mc-field__requirement, .mc-field__help {
  font-size: var(--font-size-50, 0.75rem);
  line-height: var(--line-height-m, 1.5);
  font-weight: var(--font-weight-regular, 400);
  vertical-align: top;
  color: var(--field-color-requirement, #666666);
}
.mc-field__help {
  display: block;
  margin-top: 0.125rem;
}
.mc-field__content {
  margin-top: 0.5rem;
}
.mc-field__validation-message {
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-m, 1.5);
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
}
.mc-field__validation-message.is-valid::before, .mc-field__validation-message.is-invalid::before {
  content: "";
  height: 1.25rem;
  width: 1.25rem;
}
.mc-field__validation-message.is-valid {
  color: var(--field-color-validation-valid, #117f03);
}
.mc-field__validation-message.is-valid::before {
  background-color: var(--field-color-validation-valid, #117f03);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-field__validation-message.is-invalid {
  color: var(--field-color-validation-invalid, #c61112);
}
.mc-field__validation-message.is-invalid::before {
  background-color: var(--field-color-validation-invalid, #c61112);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-field__validation-message.is-loading {
  color: var(--field-color-validation-loading, #666666);
}
.mc-field--group {
  border-width: 0;
  margin-inline: 0;
  padding: 0;
}
.mc-field--group .mc-field__content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0.25rem;
}
.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
  flex-flow: row wrap;
  gap: 0.25rem 1rem;
}

/* stylelint-enable string-no-newline */
.mc-toggle {
  width: fit-content;
}
.mc-toggle__container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
  position: relative;
  padding: 0.25rem;
}
.mc-toggle__container::before, .mc-toggle__container::after {
  content: "";
}
.mc-toggle__container::before {
  transition: box-shadow 200ms ease;
  height: 1.5rem;
  width: 2.5rem;
  background-color: var(--forms-color-background-unchecked, #666666);
  border-radius: var(--border-radius-l, 1rem);
  flex-shrink: 0;
}
.mc-toggle__container::after {
  height: 1.25rem;
  width: 1.25rem;
  background-color: var(--forms-color-icon-inverse, #ffffff);
  border-radius: var(--border-radius-full, 100%);
  background-position: center;
  left: 0.375rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.mc-toggle__input {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  padding: 0;
  width: 1px;
}
.mc-toggle__label {
  color: var(--forms-color-text-default, #000000);
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-m, 1.5);
}
.mc-toggle:has(:checked) .mc-toggle__container::before {
  background-color: var(--forms-color-background-checked, #117f03);
}
.mc-toggle:has(:checked) .mc-toggle__container::after {
  transform: translate(1rem, -50%);
}
.mc-toggle:has(:disabled) .mc-toggle__container {
  cursor: not-allowed;
}
.mc-toggle:has(:disabled) .mc-toggle__container::before {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
}
.mc-toggle:has(:disabled) .mc-toggle__container::after {
  background-color: var(--forms-color-icon-disabled, #737373);
}
.mc-toggle:has(:disabled) .mc-toggle__label {
  color: var(--forms-color-text-disabled, #737373);
}
.mc-toggle:has(:focus-visible) .mc-toggle__container::before {
  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-toggle--m .mc-toggle__container::before {
  height: 2rem;
  width: 3.5rem;
}
.mc-toggle--m .mc-toggle__container::after {
  height: 1.5rem;
  width: 1.5rem;
  left: 0.5rem;
}
.mc-toggle--m:has(:checked) .mc-toggle__container::after {
  transform: translate(1.5rem, -50%);
}
.mc-toggle--hide-label .mc-toggle__label {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  padding: 0;
  width: 1px;
}

.mc-field__content:where(.mc-field__content--inline) {
  display: flex;
  flex-flow: row wrap;
  gap: 0.25rem 1rem;
}</style>
