<svelte:options
  customElement={{
    tag: 'm-built-in-menu',
    props: {
      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },
    },
  }}
/>

<script lang="ts">
  /**
   * A built-in menu is a structured list of navigational or interactive options, typically displayed as a vertical stack. It allows users to browse categories, access settings, or navigate through different sections of an interface.
   *
   * @slot item - use this slot to insert `m-menu-item` components.
   */
  interface Props {
    /**
     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
     */
    outlined?: boolean;
  }

  let { outlined }: Props = $props();
</script>

<nav
  class={{
    'mc-built-in-menu': true,
    'mc-built-in-menu--outlined': outlined,
  }}
  aria-label="menu"
>
  <ul class="mc-built-in-menu__list">
    <slot name="item" />
  </ul>
</nav>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-built-in-menu {
  display: inline-block;
  width: 15rem;
  padding: 0.5rem;
  background-color: var(--built-in-menu-color-background-default, #ffffff);
  border-radius: var(--border-radius-s, 0.25rem);
}
.mc-built-in-menu--outlined {
  border: 1px solid var(--color-border-primary, #cccccc);
}
.mc-built-in-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-built-in-menu__item {
  display: flex;
  align-items: center;
  height: 3.5rem;
  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
}
.mc-built-in-menu__item--selected .mc-built-in-menu__button,
.mc-built-in-menu__item--selected .mc-built-in-menu__link {
  background-color: var(--built-in-menu-color-background-selected, #ebf5de);
}
.mc-built-in-menu__item--selected .mc-built-in-menu__label {
  color: var(--built-in-menu-color-text-selected, #006902);
  font-weight: var(--font-weight-semi-bold, 600);
}
.mc-built-in-menu__item--selected .mc-built-in-menu__icon {
  fill: var(--built-in-menu-color-text-selected, #006902);
}
.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__button, .mc-built-in-menu__item:not(.mc-built-in-menu__item--selected):hover .mc-built-in-menu__link,
.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__button:focus-visible,
.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__link:focus-visible {
  background-color: var(--built-in-menu-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-built-in-menu__item:not(.mc-built-in-menu__item--selected) .mc-built-in-menu__label {
  color: var(--built-in-menu-color-text-default, #404040);
}
.mc-built-in-menu__item--selected, .mc-built-in-menu__item:has(+ .mc-built-in-menu__item--selected), .mc-built-in-menu__item:last-child, .mc-built-in-menu__item:hover, .mc-built-in-menu__item:has(+ .mc-built-in-menu__item:hover) {
  border-bottom: 1px solid transparent;
}
.mc-built-in-menu__icon {
  flex: 0 0 auto;
}
.mc-built-in-menu__button {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-s, 0.25rem);
  background-color: var(--built-in-menu-color-background-default, #ffffff);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  border: none;
  cursor: pointer;
  color: var(--built-in-menu-color-text-default, #404040);
}
.mc-built-in-menu__link {
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-s, 0.25rem);
  background-color: var(--built-in-menu-color-background-default, #ffffff);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  text-decoration: none;
}
.mc-built-in-menu__label {
  flex: 1 1 auto;
  margin-left: 0.5rem;
  margin-right: 1rem;
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-s, 1.3);
  /* Truncature */
  overflow: hidden;
  display: -webkit-box;
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}</style>
